/* ==========================================================================
Barockreitzentrum Heimsheim — app.css
Setzt tokens.css voraus. Reihenfolge im :
1. tokens.css 2. app.css
Inhalt:
01 Reset 02 Basis-Typografie 03 Layout & Grid
04 Section-Header 05 Buttons 06 Header / Navigation
07 Mobile-Menue 08 Hero 09 Figuren & Medien
10 Angebots-Liste 11 Fakten & Rating 12 Preistabelle
13 FAQ 14 Zitat 15 Galerie & Lightbox
16 Formulare 17 CTA-Band 18 Footer
19 Reveal & Motion 20 Utilities
========================================================================== */
/* ==========================================================================
01 — RESET
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + var(--sp-5));
}
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol, fieldset, legend { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
img, picture, video, svg {
display: block;
max-width: 100%;
}
img {
height: auto;
background-color: var(--paper-2); /* ruhiger Platzhalter bis das Bild da ist */
}
input, button, textarea, select {
font: inherit;
color: inherit;
}
button { background: none; border: 0; }
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset { border: 0; }
/* ==========================================================================
02 — BASIS-TYPOGRAFIE
========================================================================== */
body {
min-height: 100svh;
background-color: var(--bg);
color: var(--text);
font-family: var(--font-ui);
font-size: var(--t-base);
font-weight: 400;
line-height: var(--lh-body);
letter-spacing: var(--ls-body);
font-feature-settings: "kern" 1, "liga" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden; /* Sicherheitsnetz gegen horizontales Scrollen */
}
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
font-family: var(--font-display);
font-weight: 400;
color: var(--text);
text-wrap: balance;
}
h1, .h1 {
font-size: var(--t-h1);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
font-variation-settings: var(--fraunces-display);
}
h2, .h2 {
font-size: var(--t-h2);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
font-variation-settings: var(--fraunces-heading);
}
h3, .h3 {
font-size: var(--t-h3);
line-height: var(--lh-heading);
letter-spacing: -.012em;
font-variation-settings: var(--fraunces-heading);
}
h4, .h4 {
font-family: var(--font-ui);
font-size: var(--t-h4);
font-weight: 600;
line-height: var(--lh-snug);
letter-spacing: -.005em;
}
p { max-width: var(--measure); }
p + p { margin-top: var(--sp-4); }
.lead {
font-size: var(--t-lead);
line-height: var(--lh-snug);
color: var(--text-muted);
max-width: var(--measure-wide);
text-wrap: pretty;
}
.body-lg { font-size: var(--t-body-lg); }
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
font-family: var(--font-ui);
font-size: var(--t-micro);
font-weight: 600;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--accent-hover);
}
.eyebrow::before {
content: "";
width: clamp(20px, 4vw, 42px);
height: 1px;
background-color: var(--accent);
flex: none;
}
.eyebrow--plain::before { display: none; }
a {
color: inherit;
text-decoration-color: var(--line-strong);
text-underline-offset: .22em;
text-decoration-thickness: 1px;
transition: color var(--dur-fast) var(--ease-standard),
text-decoration-color var(--dur-fast) var(--ease-standard);
}
a:hover {
color: var(--accent-hover);
text-decoration-color: currentColor;
}
.on-dark a:hover { color: var(--accent); }
strong, b { font-weight: 600; }
small { font-size: var(--t-small); }
hr,
.hairline {
height: var(--hairline);
border: 0;
background-color: var(--line);
margin: 0;
}
.hairline--brass { background-color: var(--brass); opacity: .55; }
::selection {
background-color: var(--brass);
color: var(--white);
}
/* Fokus: durchgaengig sichtbar, nie entfernt */
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
border-radius: var(--r-xs);
}
.skip-link {
position: fixed;
top: var(--sp-3);
left: var(--sp-3);
z-index: var(--z-skip);
transform: translateY(calc(-100% - var(--sp-6)));
padding: var(--sp-3) var(--sp-5);
background-color: var(--forest-deep);
color: var(--text-on-dark);
font-size: var(--t-small);
font-weight: 600;
border-radius: var(--r-sm);
box-shadow: var(--sh-lg);
text-decoration: none;
transition: transform var(--dur-fast) var(--ease-out-expo);
}
.skip-link:focus-visible {
transform: translateY(0);
color: var(--text-on-dark);
}
/* ==========================================================================
03 — LAYOUT & EDITORIAL-GRID
========================================================================== */
.wrap {
width: 100%;
max-width: var(--w-page);
margin-inline: auto;
padding-inline: var(--sp-gutter);
}
.wrap--wide { max-width: var(--w-wide); }
.wrap--text { max-width: var(--w-text); }
.wrap--narrow { max-width: var(--w-narrow); }
.wrap--flush { padding-inline: 0; }
.section {
position: relative;
padding-block: var(--sp-section);
background-color: var(--bg);
color: var(--text);
}
.section--lg { padding-block: var(--sp-section-lg); }
.section--tight { padding-block: var(--sp-8); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--alt { background-color: var(--bg-alt); }
.section--tint { background-color: var(--forest-tint); }
.section--line { border-top: var(--hairline) solid var(--line); }
/* 12-Spalten-Editorial-Grid. Auf Mobil einspaltig, ab 900px asymmetrisch. */
.grid-12 {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--sp-gap);
}
.grid-12 > * { min-width: 0; }
.gap-lg { gap: var(--sp-gap-lg); }
.gap-0 { gap: 0; }
.items-end { align-items: end; }
.items-center { align-items: center; }
.items-start { align-items: start; }
/* Spaltenspannen: erst ab 900px aktiv, davor volle Breite.
Bewusst ausgeschrieben statt [class*="c-"] — ein Substring-Selektor wuerde
auch sec-head__title, sec-head__lead usw. treffen und deren Layout kapern. */
.c-1-4, .c-1-5, .c-1-6, .c-1-7, .c-1-8,
.c-2-7, .c-2-8, .c-2-11, .c-3-11, .c-4-10,
.c-5-13, .c-6-13, .c-7-13, .c-8-13, .c-9-13,
.c-full { grid-column: 1 / -1; }
@media (min-width: 900px) {
.grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.c-1-4 { grid-column: 1 / 5; }
.c-1-5 { grid-column: 1 / 6; }
.c-1-6 { grid-column: 1 / 7; }
.c-1-7 { grid-column: 1 / 8; }
.c-1-8 { grid-column: 1 / 9; }
.c-2-7 { grid-column: 2 / 8; }
.c-2-8 { grid-column: 2 / 9; }
.c-2-11 { grid-column: 2 / 12; }
.c-3-11 { grid-column: 3 / 12; }
.c-4-10 { grid-column: 4 / 11; }
.c-5-13 { grid-column: 5 / 13; }
.c-6-13 { grid-column: 6 / 13; }
.c-7-13 { grid-column: 7 / 13; }
.c-8-13 { grid-column: 8 / 13; }
.c-9-13 { grid-column: 9 / 13; }
.c-full { grid-column: 1 / -1; }
/* Ueberlappung / Layering — nur auf grossen Screens */
.pull-up { margin-top: clamp(-10rem, -8vw, -3rem); }
.pull-down { margin-top: clamp(2.5rem, 5vw, 7rem); }
.pull-left { margin-left: clamp(-4rem, -3vw, -1rem); }
.pull-right { margin-right: clamp(-4rem, -3vw, -1rem); }
}
/* Randloser Bildstreifen, der aus dem Container ausbricht */
.bleed-right { margin-right: calc(var(--sp-gutter) * -1); }
.bleed-left { margin-left: calc(var(--sp-gutter) * -1); }
@media (min-width: 1400px) {
.bleed-right { margin-right: calc((100vw - var(--w-page)) / -2 - var(--sp-gutter)); }
.bleed-left { margin-left: calc((100vw - var(--w-page)) / -2 - var(--sp-gutter)); }
}
/* Einfache Auto-Fit-Reihe fuer gleichrangige Inhalte */
.row {
display: flex;
flex-wrap: wrap;
gap: var(--sp-gap);
}
.row--between { justify-content: space-between; }
.row--baseline { align-items: baseline; }
.stack > * + * { margin-top: var(--sp-5); }
.stack-sm > * + * { margin-top: var(--sp-3); }
.stack-lg > * + * { margin-top: var(--sp-7); }
/* ==========================================================================
04 — SECTION-HEADER MIT NUMMERIERUNG
========================================================================== */
.sec-head {
display: grid;
gap: var(--sp-4);
margin-bottom: var(--sp-8);
}
.sec-head__num {
display: flex;
align-items: center;
gap: var(--sp-4);
font-family: var(--font-ui);
font-size: var(--t-micro);
font-weight: 600;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-muted);
}
.sec-head__num b {
font-family: var(--font-display);
font-size: var(--t-small);
font-weight: 500;
letter-spacing: var(--ls-num);
color: var(--accent-hover);
font-variation-settings: var(--fraunces-small);
}
.sec-head__num::after {
content: "";
flex: 1;
height: 1px;
background-color: var(--line);
}
.sec-head__title { max-width: 20ch; }
.sec-head__lead { max-width: var(--measure); }
/* Zweispaltige Variante: Titel links, Vorspann rechts */
@media (min-width: 900px) {
.sec-head--split {
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
column-gap: var(--sp-gap-lg);
align-items: end;
}
.sec-head--split .sec-head__num { grid-column: 1 / -1; }
.sec-head--split .sec-head__lead { padding-bottom: .35em; }
}
/* ==========================================================================
05 — BUTTONS
========================================================================== */
.btn {
--btn-bg: transparent;
--btn-fg: var(--text);
--btn-bd: var(--line-strong);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-3);
padding: .95em 1.7em;
background-color: var(--btn-bg);
color: var(--btn-fg);
border: 1px solid var(--btn-bd);
border-radius: var(--r-pill);
font-family: var(--font-ui);
font-size: var(--t-small);
font-weight: 600;
letter-spacing: .04em;
line-height: 1.2;
text-decoration: none;
text-align: center;
cursor: pointer;
overflow: hidden;
isolation: isolate;
transition: transform var(--dur-fast) var(--ease-out-expo),
box-shadow var(--dur-normal) var(--ease-out-expo),
color var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard);
}
/* Fuellung faehrt von unten ein — nur transform, kein Layout */
.btn::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--btn-hover-bg, var(--forest-soft));
transform: scaleY(0);
transform-origin: bottom;
transition: transform var(--dur-normal) var(--ease-out-expo);
}
.btn:hover::before,
.btn:focus-visible::before { transform: scaleY(1); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn:active { transform: translateY(0); }
.btn__icon { flex: none; width: 1em; height: 1em; }
/* Varianten */
.btn--solid {
--btn-bg: var(--forest);
--btn-fg: var(--white);
--btn-bd: var(--forest);
--btn-hover-bg: var(--forest-soft);
}
.btn--solid:hover, .btn--solid:focus-visible { color: var(--white); border-color: var(--forest-soft); }
.btn--brass {
--btn-bg: var(--brass);
--btn-fg: #23190a;
--btn-bd: var(--brass);
--btn-hover-bg: var(--brass-light);
}
.btn--brass:hover, .btn--brass:focus-visible { color: #23190a; border-color: var(--brass-light); }
.btn--ghost {
--btn-bg: transparent;
--btn-fg: var(--text);
--btn-bd: var(--line-strong);
--btn-hover-bg: var(--forest);
}
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--white); border-color: var(--forest); }
.on-dark .btn--ghost { --btn-hover-bg: var(--paper); }
.on-dark .btn--ghost:hover, .on-dark .btn--ghost:focus-visible { color: var(--ink); border-color: var(--paper); }
.btn--lg { padding: 1.15em 2.2em; font-size: var(--t-base); }
.btn--sm { padding: .7em 1.25em; font-size: var(--t-tiny); }
.btn--block { display: flex; width: 100%; }
/* Textlink mit animiertem Unterstrich */
.btn--link {
padding: 0;
border: 0;
border-radius: 0;
overflow: visible;
background: none;
color: var(--text);
font-size: var(--t-small);
letter-spacing: .06em;
text-transform: uppercase;
}
.btn--link::before { display: none; }
.btn--link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -.45em;
height: 1px;
background-color: currentColor;
transform: scaleX(1);
transform-origin: right;
transition: transform var(--dur-normal) var(--ease-out-expo);
}
.btn--link:hover { transform: none; box-shadow: none; color: var(--accent-hover); }
.btn--link:hover::after,
.btn--link:focus-visible::after {
transform: scaleX(0);
transform-origin: right;
}
.btn-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-4);
}
/* ==========================================================================
06 — HEADER / NAVIGATION (Desktop)
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
background-color: var(--paper);
border-bottom: var(--hairline) solid transparent;
transition: background-color var(--dur-normal) var(--ease-standard),
border-color var(--dur-normal) var(--ease-standard),
box-shadow var(--dur-normal) var(--ease-standard);
}
/* WICHTIG: backdrop-filter erzeugt einen Containing Block. Auf Mobil wuerde das
das position:fixed Fullscreen-Menue im Header einsperren. Deshalb NUR ab 1024px. */
@media (min-width: 1024px) {
.site-header {
background-color: rgba(247, 244, 238, .82);
-webkit-backdrop-filter: saturate(150%) blur(14px);
backdrop-filter: saturate(150%) blur(14px);
}
}
.site-header.is-scrolled {
border-bottom-color: var(--line);
box-shadow: var(--sh-sm);
}
@media (min-width: 1024px) {
.site-header.is-scrolled { background-color: rgba(247, 244, 238, .94); }
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-5);
min-height: var(--header-h-sm);
}
@media (min-width: 1024px) {
.header-inner { min-height: var(--header-h); }
}
/* Wortmarke */
.brand {
display: flex;
align-items: center;
gap: var(--sp-3);
text-decoration: none;
flex: none;
}
.brand:hover { color: inherit; }
.brand__mark {
width: 30px;
height: 30px;
flex: none;
color: var(--forest);
transition: transform var(--dur-slow) var(--ease-out-expo);
}
.brand:hover .brand__mark { transform: rotate(-6deg) scale(1.06); }
.brand__text { display: grid; line-height: 1.05; }
.brand__name {
font-family: var(--font-display);
font-size: clamp(.95rem, .88rem + .3vw, 1.15rem);
font-variation-settings: var(--fraunces-small);
letter-spacing: -.01em;
color: var(--forest-deep);
}
.brand__sub {
font-size: var(--t-micro);
font-weight: 500;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--ink-faint);
}
/* Hauptnavigation — ab 1024px sichtbar */
.nav { display: none; }
@media (min-width: 1024px) {
.nav { display: block; margin-inline: auto; }
}
.nav__list {
display: flex;
align-items: center;
gap: clamp(.5rem, .1rem + 1.1vw, 1.75rem);
}
.nav__item { position: relative; }
.nav__link {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-3) 0;
font-size: var(--t-small);
font-weight: 500;
letter-spacing: .01em;
text-decoration: none;
white-space: nowrap;
color: var(--ink);
}
.nav__link::after {
content: "";
position: absolute;
left: 0;
bottom: .45rem;
width: 100%;
height: 1px;
background-color: var(--brass);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-normal) var(--ease-out-expo);
}
.nav__item:hover > .nav__link::after,
.nav__link:focus-visible::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--forest); font-weight: 600; }
.nav__caret {
width: .55em;
height: .55em;
flex: none;
transition: transform var(--dur-fast) var(--ease-standard);
}
.nav__item.is-open > .nav__link .nav__caret { transform: rotate(180deg); }
/* Dropdown */
.subnav {
position: absolute;
top: 100%;
left: 50%;
min-width: 258px;
padding: var(--sp-3);
background-color: var(--white);
border: var(--hairline) solid var(--line);
border-radius: var(--r-md);
box-shadow: var(--sh-lg);
opacity: 0;
visibility: hidden;
transform: translate(-50%, -6px);
transition: opacity var(--dur-fast) var(--ease-standard),
transform var(--dur-normal) var(--ease-out-expo),
visibility 0s linear var(--dur-normal);
}
.nav__item:hover > .subnav,
.nav__item:focus-within > .subnav,
.nav__item.is-open > .subnav {
opacity: 1;
visibility: visible;
transform: translate(-50%, 8px);
transition-delay: 0s;
}
.subnav__link {
display: block;
padding: .6rem .8rem;
border-radius: var(--r-sm);
font-size: var(--t-small);
text-decoration: none;
color: var(--ink-soft);
transition: background-color var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.subnav__link:hover,
.subnav__link:focus-visible {
background-color: var(--paper-2);
color: var(--forest);
}
.subnav__link.is-active {
color: var(--forest);
font-weight: 600;
background-color: var(--forest-tint);
}
.header-actions {
display: flex;
align-items: center;
gap: var(--sp-3);
flex: none;
}
.header-actions .btn { padding: .7em 1.3em; font-size: var(--t-tiny); }
@media (max-width: 559px) {
.header-actions .btn--brass { display: none; } /* Platz fuer Telefon + Toggle */
}
/* ==========================================================================
07 — MOBILE NAVIGATION
========================================================================== */
.nav-toggle {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 0 10px;
cursor: pointer;
border-radius: var(--r-sm);
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }
.nav-toggle__bar {
display: block;
width: 100%;
height: 1.5px;
background-color: var(--ink);
transition: transform var(--dur-normal) var(--ease-out-expo),
opacity var(--dur-fast) var(--ease-standard);
}
/* Von hinten gezaehlt, damit ein vorangestelltes .u-sr-only-Label
die Zuordnung der drei Balken nicht verschiebt. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-last-child(3) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-last-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-last-child(1) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-nav {
position: fixed;
inset: 0;
z-index: var(--z-mobilenav);
display: flex;
flex-direction: column;
background-color: var(--paper);
opacity: 0;
visibility: hidden;
transform: translateY(-1.5rem);
transition: opacity var(--dur-normal) var(--ease-standard),
transform var(--dur-slow) var(--ease-out-expo),
visibility 0s linear var(--dur-slow);
overflow-y: auto;
overscroll-behavior: contain;
}
.mobile-nav.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-delay: 0s;
}
@media (min-width: 1024px) { .mobile-nav { display: none; } }
.mobile-nav__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
min-height: var(--header-h-sm);
border-bottom: var(--hairline) solid var(--line);
}
.mobile-nav__body {
flex: 1;
padding-block: var(--sp-6) var(--sp-8);
}
.m-nav__item + .m-nav__item { border-top: var(--hairline) solid var(--line); }
.m-nav__link {
display: block;
padding: var(--sp-4) 0;
font-family: var(--font-display);
font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
font-variation-settings: var(--fraunces-heading);
letter-spacing: var(--ls-heading);
line-height: 1.15;
text-decoration: none;
color: var(--ink);
}
.m-nav__link.is-active { color: var(--forest); }
.m-nav__link.is-active::before {
content: "";
display: inline-block;
width: .4em;
height: .4em;
margin-right: .4em;
vertical-align: .12em;
border-radius: 50%;
background-color: var(--brass);
}
.m-sub {
display: grid;
gap: var(--sp-1);
padding: 0 0 var(--sp-5) var(--sp-4);
border-left: var(--hairline) solid var(--line);
margin-left: var(--sp-1);
}
.m-sub__link {
padding: var(--sp-2) 0;
font-size: var(--t-base);
color: var(--ink-soft);
text-decoration: none;
}
.m-sub__link.is-active { color: var(--forest); font-weight: 600; }
.mobile-nav__foot {
display: grid;
gap: var(--sp-4);
padding-block: var(--sp-6);
border-top: var(--hairline) solid var(--line);
}
.mobile-nav__contact {
display: grid;
gap: var(--sp-2);
font-size: var(--t-small);
color: var(--ink-soft);
}
.mobile-nav__contact a { text-decoration: none; font-weight: 600; color: var(--ink); }
body.nav-open { overflow: hidden; }
/* ==========================================================================
08 — HERO
========================================================================== */
.hero {
position: relative;
padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--sp-section);
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 62%;
background: linear-gradient(180deg, var(--paper-2) 0%, rgba(239, 234, 224, 0) 100%);
z-index: -1;
}
.hero__inner {
display: grid;
gap: var(--sp-7);
align-items: center;
}
@media (min-width: 1000px) {
.hero__inner {
grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr);
gap: var(--sp-gap-lg);
}
}
.hero__copy { display: grid; gap: var(--sp-5); }
.hero__title {
font-size: var(--t-hero);
line-height: var(--lh-tight);
letter-spacing: var(--ls-display);
font-variation-settings: var(--fraunces-display);
max-width: 13ch;
}
.hero__title em {
font-style: italic;
color: var(--forest);
font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
}
.hero__sub {
font-size: var(--t-lead);
line-height: var(--lh-snug);
color: var(--text-muted);
max-width: 40ch;
}
.hero__media { position: relative; }
.hero__media-main {
position: relative;
overflow: hidden;
border-radius: var(--r-sm);
box-shadow: var(--sh-lg);
}
.hero__media-main img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
}
/* Kleines ueberlappendes Hochformat — nur ab Tablet, sonst zu eng */
.hero__media-sub {
display: none;
position: absolute;
right: clamp(-2.5rem, -2vw, -1rem);
bottom: clamp(-3rem, -3vw, -1.5rem);
width: clamp(140px, 16vw, 220px);
border: 6px solid var(--paper);
border-radius: var(--r-sm);
box-shadow: var(--sh-lg);
overflow: hidden;
}
@media (min-width: 760px) { .hero__media-sub { display: block; } }
.hero__media-sub img {
width: 100%;
aspect-ratio: 2 / 3;
object-fit: cover;
}
/* Vertrauenszeile */
.trust {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-3) var(--sp-5);
padding-top: var(--sp-4);
border-top: var(--hairline) solid var(--line);
font-size: var(--t-small);
color: var(--text-muted);
}
.trust__item {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
}
.trust__item + .trust__item::before {
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
background-color: var(--line-strong);
margin-right: var(--sp-3);
}
.trust__item b { color: var(--ink); font-weight: 600; }
/* Auf schmalen Screens gestapelt — die Trennpunkte wuerden sonst am
Zeilenanfang stehen und wie Aufzaehlungszeichen wirken. */
@media (max-width: 699px) {
.trust { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.trust__item + .trust__item::before { display: none; }
}
.stars {
display: inline-flex;
gap: 2px;
color: var(--brass);
flex: none;
}
.stars svg { width: 15px; height: 15px; }
/* ==========================================================================
09 — FIGUREN & MEDIEN
========================================================================== */
.fig { position: relative; margin: 0; }
.fig__media {
position: relative;
overflow: hidden;
border-radius: var(--r-sm);
background-color: var(--paper-2);
}
.fig__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease-out-expo);
}
.fig--zoom .fig__media:hover img,
a:hover > .fig__media img { transform: scale(1.035); }
.fig--tall .fig__media img { aspect-ratio: 3 / 4; }
.fig--portrait .fig__media img { aspect-ratio: 2 / 3; }
.fig--wide .fig__media img { aspect-ratio: 16 / 9; }
.fig--cine .fig__media img { aspect-ratio: 21 / 9; }
.fig--square .fig__media img { aspect-ratio: 1 / 1; }
.fig--auto .fig__media img { aspect-ratio: auto; }
/* Torbogen-Anmutung fuer barocke Hochformate */
.fig--arch .fig__media { border-radius: var(--r-arch); }
/* Versetzte Messinglinie hinter dem Bild */
.fig--frame .fig__media::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: inherit;
pointer-events: none;
}
/* Die Rahmenlinie liegt HINTER dem Bild, aber ueber dem Sectionhintergrund.
Darum z-index 0/1 im selben Stacking-Kontext statt z-index: -1. */
.fig--frame .fig__media { z-index: 1; }
.fig--frame::before {
content: "";
position: absolute;
inset: clamp(10px, 1.4vw, 20px) calc(clamp(10px, 1.4vw, 20px) * -1)
calc(clamp(10px, 1.4vw, 20px) * -1) clamp(10px, 1.4vw, 20px);
border: 1px solid var(--brass);
border-radius: var(--r-sm);
opacity: .55;
z-index: 0;
pointer-events: none;
}
.fig__cap {
display: flex;
gap: var(--sp-3);
margin-top: var(--sp-3);
font-size: var(--t-small);
line-height: var(--lh-snug);
color: var(--text-muted);
max-width: 44ch;
}
.fig__cap::before {
content: "";
flex: none;
width: 18px;
height: 1px;
margin-top: .72em;
background-color: var(--brass);
}
/* Bildlabel auf dem Foto (z. B. "Festsaal") */
.fig__badge {
position: absolute;
left: var(--sp-4);
bottom: var(--sp-4);
padding: .45em 1em;
background-color: rgba(247, 244, 238, .92);
color: var(--ink);
border-radius: var(--r-pill);
font-size: var(--t-micro);
font-weight: 600;
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
/* Foto mit Textauflage */
.fig--overlay .fig__media::before {
content: "";
position: absolute;
inset: 0;
background: var(--scrim);
z-index: 1;
}
.fig__overlay {
position: absolute;
inset: auto 0 0 0;
z-index: 2;
padding: clamp(1.25rem, 3vw, 2.75rem);
color: var(--text-on-dark);
}
.fig__overlay h2,
.fig__overlay h3 { color: var(--white); }
/* ==========================================================================
10 — ANGEBOTS-LISTE (editorial, statt Card-Grid)
========================================================================== */
.offer-list {
display: grid;
border-top: var(--hairline) solid var(--line);
}
.offer {
position: relative;
display: grid;
gap: var(--sp-4);
padding-block: var(--sp-6);
border-bottom: var(--hairline) solid var(--line);
transition: background-color var(--dur-normal) var(--ease-standard);
}
@media (min-width: 860px) {
.offer {
grid-template-columns: 5.5rem minmax(0, 4fr) minmax(0, 5fr) auto;
align-items: start;
column-gap: var(--sp-gap);
padding-inline: var(--sp-4);
margin-inline: calc(var(--sp-4) * -1);
}
.offer:hover { background-color: var(--paper-2); }
.offer:hover .offer__thumb { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
}
.offer__num {
font-family: var(--font-display);
font-size: var(--t-small);
font-variation-settings: var(--fraunces-small);
letter-spacing: var(--ls-num);
color: var(--accent-hover);
padding-top: .5em;
}
.offer__title { margin: 0; }
.offer__text { color: var(--text-muted); max-width: 46ch; }
.offer__meta {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin-top: var(--sp-3);
}
.offer__cta { align-self: center; }
/* Vorschaubild, das beim Hover erscheint — reines transform/opacity */
.offer__thumb {
display: none;
position: absolute;
top: 50%;
left: 74%;
z-index: var(--z-raised);
width: 210px;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -50%) scale(.94) rotate(-3deg);
box-shadow: var(--sh-lg);
border-radius: var(--r-sm);
overflow: hidden;
transition: opacity var(--dur-normal) var(--ease-out-expo),
transform var(--dur-slow) var(--ease-out-expo);
}
@media (min-width: 1100px) { .offer__thumb { display: block; } }
.offer__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pill {
display: inline-flex;
align-items: center;
padding: .35em .9em;
border: 1px solid var(--line-strong);
border-radius: var(--r-pill);
font-size: var(--t-tiny);
color: var(--text-muted);
white-space: nowrap;
}
.pill--brass { border-color: var(--brass); color: var(--accent-hover); }
.pill--solid { background-color: var(--forest-tint); border-color: transparent; color: var(--forest); }
/* ==========================================================================
11 — FAKTEN & BEWERTUNG
========================================================================== */
.facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
gap: 0;
border-top: var(--hairline) solid var(--line);
}
.fact {
padding: var(--sp-6) var(--sp-5) var(--sp-6) 0;
border-bottom: var(--hairline) solid var(--line);
}
@media (min-width: 700px) {
.fact + .fact {
padding-left: var(--sp-5);
border-left: var(--hairline) solid var(--line);
}
}
.fact__num {
display: block;
font-family: var(--font-display);
font-size: var(--t-num);
line-height: 1;
letter-spacing: var(--ls-display);
font-variation-settings: var(--fraunces-display);
color: var(--forest);
}
.fact__num sup {
font-size: .38em;
vertical-align: super;
letter-spacing: 0;
}
.fact__label {
display: block;
margin-top: var(--sp-3);
font-size: var(--t-small);
color: var(--text-muted);
max-width: 26ch;
}
/* Zeilen-Variante: fuer schmale Spalten, in denen die Kachel-Variante
umbrechen und eine verwaiste Zelle erzeugen wuerde. */
.facts--rows { grid-template-columns: minmax(0, 1fr); }
.facts--rows .fact {
display: flex;
align-items: baseline;
gap: var(--sp-5);
padding: var(--sp-4) 0;
}
.facts--rows .fact + .fact { padding-left: 0; border-left: 0; }
.facts--rows .fact__num { font-size: var(--t-h2); min-width: 4.5ch; }
.facts--rows .fact__label { margin-top: 0; }
/* Bewertungs-Panel */
.rating {
display: grid;
gap: var(--sp-5);
align-items: center;
padding: var(--sp-7);
background-color: var(--white);
border: var(--hairline) solid var(--line);
border-radius: var(--r-md);
box-shadow: var(--sh-md);
}
@media (min-width: 720px) {
.rating { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-7); }
}
.rating__score {
font-family: var(--font-display);
font-size: var(--t-num);
line-height: 1;
letter-spacing: var(--ls-display);
font-variation-settings: var(--fraunces-display);
color: var(--forest);
}
.rating__score small {
font-family: var(--font-ui);
font-size: .26em;
letter-spacing: var(--ls-label);
color: var(--ink-faint);
display: block;
margin-top: 1em;
text-transform: uppercase;
}
.rating__meta { font-size: var(--t-small); color: var(--text-muted); }
.rating .stars svg { width: 20px; height: 20px; }
/* ==========================================================================
12 — PREISTABELLE
========================================================================== */
.price-table {
width: 100%;
font-size: var(--t-small);
text-align: left;
}
.price-table caption {
text-align: left;
padding-bottom: var(--sp-4);
font-size: var(--t-small);
color: var(--text-muted);
}
.price-table th,
.price-table td {
padding: var(--sp-4) var(--sp-3);
border-bottom: var(--hairline) solid var(--line);
vertical-align: baseline;
}
.price-table thead th {
font-size: var(--t-micro);
font-weight: 600;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-muted);
border-bottom-color: var(--line-strong);
}
.price-table tbody th {
font-weight: 500;
color: var(--text);
padding-left: 0;
}
.price-table td:last-child,
.price-table th:last-child {
text-align: right;
padding-right: 0;
white-space: nowrap;
}
.price-table tbody tr { transition: background-color var(--dur-fast) var(--ease-standard); }
.price-table tbody tr:hover { background-color: var(--paper-2); }
.price-table .is-highlight th,
.price-table .is-highlight td {
background-color: var(--brass-tint);
border-bottom-color: var(--brass-light);
}
.price-table .price {
font-family: var(--font-display);
font-size: var(--t-h4);
font-variation-settings: var(--fraunces-small);
color: var(--forest);
white-space: nowrap;
}
.price-note {
margin-top: var(--sp-4);
font-size: var(--t-small);
color: var(--text-muted);
}
/* Grosser Preis-Anker */
.price-anchor {
display: grid;
gap: var(--sp-2);
padding: var(--sp-6);
background-color: var(--forest-tint);
border-radius: var(--r-md);
border-left: 3px solid var(--brass);
}
.price-anchor__num {
font-family: var(--font-display);
font-size: var(--t-num);
line-height: 1;
letter-spacing: var(--ls-display);
font-variation-settings: var(--fraunces-display);
color: var(--forest);
}
.price-anchor__label { font-size: var(--t-small); color: var(--text-muted); max-width: 32ch; }
/* Tabelle horizontal scrollbar halten, Seite nie */
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ==========================================================================
13 — FAQ-ACCORDION
========================================================================== */
.faq { border-top: var(--hairline) solid var(--line); }
.faq__item { border-bottom: var(--hairline) solid var(--line); }
.faq__q {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-5);
width: 100%;
padding: var(--sp-5) 0;
text-align: left;
cursor: pointer;
font-family: var(--font-display);
font-size: var(--t-h4);
font-variation-settings: var(--fraunces-small);
line-height: var(--lh-snug);
color: var(--text);
transition: color var(--dur-fast) var(--ease-standard);
}
.faq__q:hover { color: var(--accent-hover); }
.faq__icon {
position: relative;
flex: none;
width: 18px;
height: 18px;
margin-top: .28em;
}
.faq__icon::before,
.faq__icon::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1.5px;
background-color: var(--accent-hover);
transition: transform var(--dur-normal) var(--ease-out-expo);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }
.faq__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-normal) var(--ease-out-expo);
}
.faq__panel[data-open="true"] { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__a {
padding-bottom: var(--sp-5);
color: var(--text-muted);
max-width: var(--measure);
}
/* ==========================================================================
14 — ZITAT / TESTIMONIAL
========================================================================== */
.quote {
position: relative;
display: grid;
gap: var(--sp-5);
padding-left: clamp(1.5rem, 4vw, 3.5rem);
border-left: 1px solid var(--brass);
margin: 0;
}
.quote__text {
font-family: var(--font-display);
font-size: var(--t-h3);
font-variation-settings: var(--fraunces-heading);
line-height: 1.32;
letter-spacing: -.012em;
color: var(--text);
max-width: 26ch;
text-wrap: pretty;
}
.quote__cite {
display: flex;
align-items: center;
gap: var(--sp-3);
font-size: var(--t-small);
font-style: normal;
color: var(--text-muted);
}
.quote__cite::before {
content: "";
width: 22px;
height: 1px;
background-color: var(--line-strong);
flex: none;
}
.quote--lg .quote__text { font-size: var(--t-h2); }
/* ==========================================================================
15 — GALERIE & LIGHTBOX
========================================================================== */
.gallery {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-3);
}
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-4); } }
.gal-item {
position: relative;
display: block;
grid-column: span 2;
overflow: hidden;
border-radius: var(--r-sm);
background-color: var(--paper-2);
cursor: zoom-in;
padding: 0;
border: 0;
width: 100%;
}
.gal-item img {
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease-out-expo),
opacity var(--dur-normal) var(--ease-standard);
}
.gal-item::after {
content: "";
position: absolute;
inset: 0;
background: var(--scrim-soft);
opacity: 0;
transition: opacity var(--dur-normal) var(--ease-standard);
}
.gal-item:hover img,
.gal-item:focus-visible img { transform: scale(1.04); }
.gal-item:hover::after,
.gal-item:focus-visible::after { opacity: 1; }
@media (min-width: 700px) {
.gal-item--wide { grid-column: span 4; }
.gal-item--wide img { aspect-ratio: 16 / 9; }
.gal-item--tall { grid-row: span 2; }
.gal-item--tall img { aspect-ratio: 3 / 4; height: 100%; }
.gal-item--full { grid-column: span 6; }
.gal-item--full img { aspect-ratio: 21 / 9; }
}
/* Lightbox */
.lightbox {
position: fixed;
inset: 0;
z-index: var(--z-lightbox);
display: grid;
grid-template-rows: auto 1fr auto;
background-color: rgba(22, 41, 31, .965);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-normal) var(--ease-standard),
visibility 0s linear var(--dur-normal);
}
.lightbox.is-open {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.lightbox__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding: var(--sp-4) var(--sp-gutter);
color: var(--text-on-dark-muted);
font-size: var(--t-small);
}
.lightbox__stage {
display: grid;
place-items: center;
padding: 0 var(--sp-4);
min-height: 0;
}
.lightbox__img {
max-width: min(1200px, 94vw);
max-height: 74vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: var(--r-sm);
box-shadow: var(--sh-xl);
background-color: transparent;
transform: scale(.985);
opacity: 0;
transition: transform var(--dur-slow) var(--ease-out-expo),
opacity var(--dur-normal) var(--ease-standard);
}
.lightbox.is-open .lightbox__img { transform: scale(1); opacity: 1; }
.lightbox__foot {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-5);
padding: var(--sp-4) var(--sp-gutter) var(--sp-6);
color: var(--text-on-dark-muted);
font-size: var(--t-small);
text-align: center;
}
.lb-btn {
display: inline-grid;
place-items: center;
width: 46px;
height: 46px;
flex: none;
border: 1px solid rgba(242, 237, 228, .3);
border-radius: 50%;
color: var(--text-on-dark);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-standard),
transform var(--dur-fast) var(--ease-out-expo),
border-color var(--dur-fast) var(--ease-standard);
}
.lb-btn:hover {
background-color: rgba(242, 237, 228, .14);
border-color: rgba(242, 237, 228, .6);
transform: scale(1.06);
}
.lb-btn svg { width: 18px; height: 18px; }
.lb-btn:focus-visible { outline-color: var(--brass-light); }
.lightbox__caption { max-width: 52ch; }
/* ==========================================================================
16 — FORMULARE
========================================================================== */
.form { display: grid; gap: var(--sp-5); }
.form-grid {
display: grid;
gap: var(--sp-5);
}
@media (min-width: 640px) {
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field--full { grid-column: 1 / -1; }
}
.field { display: grid; gap: var(--sp-2); }
.field__label {
font-size: var(--t-small);
font-weight: 600;
color: var(--text);
}
.field__label .req { color: var(--accent-hover); }
.field__hint {
font-size: var(--t-tiny);
color: var(--text-muted);
}
.input,
.textarea,
.select {
width: 100%;
padding: .85em 1em;
background-color: var(--white);
color: var(--ink);
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
font-size: var(--t-base);
line-height: 1.4;
transition: border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard);
}
.input::placeholder,
.textarea::placeholder { color: var(--ink-faint); }
.input:hover,
.textarea:hover,
.select:hover { border-color: var(--ink-faint); }
.input:focus,
.textarea:focus,
.select:focus {
outline: none;
border-color: var(--forest);
box-shadow: 0 0 0 3px rgba(31, 58, 46, .14);
}
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.textarea { min-height: 9.5rem; resize: vertical; }
.select {
appearance: none;
padding-right: 2.6em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2356504a' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1em center;
background-size: 12px;
}
.check {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--sp-3);
align-items: start;
font-size: var(--t-small);
color: var(--text-muted);
cursor: pointer;
}
.check input[type="checkbox"] {
width: 1.15rem;
height: 1.15rem;
margin-top: .18em;
accent-color: var(--forest);
cursor: pointer;
}
.check a { color: var(--text); }
.form-note {
font-size: var(--t-tiny);
color: var(--text-muted);
max-width: var(--measure);
}
/* Rueckmeldung nach dem Absenden. Der Serverless-Endpoint leitet auf
#anfrage-ok bzw. #anfrage-fehler zurueck — sichtbar wird der Block
allein ueber :target, ganz ohne JavaScript. */
.form-status {
display: none;
gap: var(--sp-3);
padding: var(--sp-6);
margin-bottom: var(--sp-6);
background-color: var(--paper-2);
border-left: 3px solid var(--brass);
border-radius: var(--r-md);
max-width: var(--measure);
}
.form-status:target { display: grid; }
.form-status:focus { outline: none; }
.form-status--ok { border-left-color: var(--forest); }
/* Kontakt-Streifen (Telefon / WhatsApp / Mail) */
.contact-strip {
display: grid;
gap: 0;
border-top: var(--hairline) solid var(--line);
}
@media (min-width: 760px) {
.contact-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contact-item + .contact-item { border-left: var(--hairline) solid var(--line); padding-left: var(--sp-5); }
}
.contact-item {
display: grid;
gap: var(--sp-1);
padding-block: var(--sp-5);
border-bottom: var(--hairline) solid var(--line);
text-decoration: none;
}
.contact-item__label {
font-size: var(--t-micro);
font-weight: 600;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-muted);
}
.contact-item__value {
font-family: var(--font-display);
font-size: var(--t-h4);
font-variation-settings: var(--fraunces-small);
color: var(--text);
}
.contact-item:hover .contact-item__value { color: var(--accent-hover); }
/* ==========================================================================
17 — CTA-BAND
========================================================================== */
.cta-band {
position: relative;
background-color: var(--forest-deep);
color: var(--text-on-dark);
overflow: hidden;
}
.cta-band__inner {
display: grid;
gap: var(--sp-6);
padding-block: var(--sp-9);
align-items: center;
}
@media (min-width: 900px) {
.cta-band__inner {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
column-gap: var(--sp-gap-lg);
}
}
.cta-band__title {
color: var(--white);
max-width: 18ch;
}
.cta-band__text { color: var(--text-on-dark-muted); max-width: 46ch; }
.cta-band__actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-4);
}
@media (min-width: 900px) { .cta-band__actions { justify-content: flex-end; } }
/* ==========================================================================
18 — FOOTER
========================================================================== */
.site-footer {
background-color: var(--forest-deep);
color: var(--text-on-dark-muted);
font-size: var(--t-small);
padding-block: var(--sp-9) var(--sp-6);
border-top: 1px solid rgba(169, 132, 70, .35);
}
.footer-grid {
display: grid;
gap: var(--sp-7);
}
@media (min-width: 700px) {
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
.footer-grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); column-gap: var(--sp-gap-lg); }
}
.footer-brand__name {
font-family: var(--font-display);
font-size: var(--t-h3);
font-variation-settings: var(--fraunces-heading);
color: var(--white);
line-height: 1.15;
}
.footer-brand__text { color: var(--text-on-dark-muted); max-width: 34ch; margin-top: var(--sp-4); }
.footer-head {
font-size: var(--t-micro);
font-weight: 600;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--brass-light);
margin-bottom: var(--sp-4);
}
.footer-list { display: grid; gap: var(--sp-3); }
.footer-list a {
text-decoration: none;
color: var(--text-on-dark-muted);
}
.footer-list a:hover { color: var(--white); }
.footer-address { font-style: normal; display: grid; gap: var(--sp-3); }
.footer-address a { text-decoration: none; }
.footer-address strong { color: var(--white); font-weight: 500; }
.footer-social {
display: flex;
gap: var(--sp-3);
margin-top: var(--sp-5);
}
.footer-social a {
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid rgba(242, 237, 228, .24);
border-radius: 50%;
color: var(--text-on-dark);
transition: background-color var(--dur-fast) var(--ease-standard),
transform var(--dur-fast) var(--ease-out-expo),
border-color var(--dur-fast) var(--ease-standard);
}
.footer-social a:hover {
background-color: var(--brass);
border-color: var(--brass);
color: #23190a;
transform: translateY(-2px);
}
.footer-social svg { width: 17px; height: 17px; }
.footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
margin-top: var(--sp-8);
padding-top: var(--sp-5);
border-top: 1px solid rgba(242, 237, 228, .16);
font-size: var(--t-tiny);
color: rgba(242, 237, 228, .6);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { color: var(--white); }
/* ==========================================================================
19 — REVEAL & MOTION
========================================================================== */
/* Ausgangszustand nur, wenn JS uebernommen hat (html.js).
Ohne JS bleibt alles sichtbar — kein leerer Screen. */
.js .reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity var(--dur-reveal) var(--ease-out-expo),
transform var(--dur-reveal) var(--ease-out-expo);
will-change: opacity, transform;
}
.js .reveal.is-in {
opacity: 1;
transform: none;
will-change: auto;
}
.js .reveal--d1 { transition-delay: 90ms; }
.js .reveal--d2 { transition-delay: 180ms; }
.js .reveal--d3 { transition-delay: 270ms; }
.js .reveal--d4 { transition-delay: 360ms; }
.js .reveal--fade { transform: none; }
.js .reveal--right { transform: translateX(24px); }
.js .reveal--left { transform: translateX(-24px); }
/* Bild-Reveal ueber clip-path */
.js .reveal--clip {
opacity: 1;
transform: none;
clip-path: inset(0 0 100% 0);
transition: clip-path 1s var(--ease-out-expo);
}
.js .reveal--clip.is-in { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.js .reveal,
.js .reveal--clip {
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
}
}
/* ==========================================================================
20 — UTILITIES
========================================================================== */
.u-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Honeypot-Feld: fuer Menschen und Screenreader weg, fuer Bots sichtbar. */
.u-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.u-nowrap { white-space: nowrap; }
.u-center { text-align: center; }
.u-right { text-align: right; }
.u-measure { max-width: var(--measure); }
.u-measure-narrow { max-width: var(--measure-narrow); }
.u-measure-wide { max-width: var(--measure-wide); }
.u-mx-auto { margin-inline: auto; }
.u-mt-0 { margin-top: 0; }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mt-7 { margin-top: var(--sp-7); }
.u-mt-8 { margin-top: var(--sp-8); }
.u-mb-0 { margin-bottom: 0; }
.u-mb-5 { margin-bottom: var(--sp-5); }
.u-mb-6 { margin-bottom: var(--sp-6); }
.u-mb-8 { margin-bottom: var(--sp-8); }
.u-muted { color: var(--text-muted); }
.u-accent { color: var(--accent-hover); }
.u-forest { color: var(--forest); }
.u-display { font-family: var(--font-display); font-variation-settings: var(--fraunces-heading); }
.u-italic { font-style: italic; }
.u-relative { position: relative; }
.u-full { width: 100%; }
@media (max-width: 699px) { .u-hide-sm { display: none !important; } }
@media (min-width: 700px) { .u-only-sm { display: none !important; } }
/* Druck: Navigation und Deko raus, Links ausschreiben */
@media print {
.site-header, .mobile-nav, .cta-band, .lightbox, .btn { display: none !important; }
body { background: #fff; color: #000; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}
/* ------------------------------------------------------------------
Logo (13.08.2026) — echte Bildmarke statt Icon.
Das Original-Logo ist hochkant (Reiter ueber dreizeiligem Schriftzug);
im waagerechten Header wuerde es auf Briefmarkengroesse schrumpfen.
Deshalb hier nur die Reiter-Silhouette als Marke, der Schriftzug steht
daneben als Text. Im Footer steht das vollstaendige Logo.
------------------------------------------------------------------ */
img.brand__mark {
width: auto;
height: 50px; /* Wimpel ist hochformatig — mehr Hoehe als die alte Reitermarke */
object-fit: contain;
transform-origin: center top;
}
@media (max-width: 640px) {
img.brand__mark { height: 42px; }
}
.footer-brand__logo {
display: block;
width: auto;
height: 132px;
margin-bottom: var(--sp-4);
object-fit: contain;
object-position: left top;
}
/* ------------------------------------------------------------------
Team-Kacheln (14.08.2026)
Bewusst gleiches Seitenverhaeltnis fuer alle Karten: die Portraets
stammen heute aus verschiedenen Quellen, ein einheitliches Shooting
kommt spaeter. Mit object-fit: cover laesst sich jedes Bild tauschen,
ohne dass das Raster kippt.
------------------------------------------------------------------ */
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-7);
}
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }
.team-card__media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--r-md);
background: var(--paper-2);
margin-bottom: var(--sp-4);
}
.team-card__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform var(--dur-slow) var(--ease-out-expo);
}
.team-card:hover .team-card__media img { transform: scale(1.04); }
/* Kachel ohne Portraet: ruhige Flaeche mit der Reiter-Silhouette */
.team-card__media--leer {
display: grid;
place-items: center;
border: 1px solid var(--line);
}
.team-card__media--leer img {
width: 46%; height: auto;
object-fit: contain;
opacity: .28;
}
.team-card:hover .team-card__media--leer img { transform: none; }
.team-card__name {
font-family: var(--font-display);
font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
color: var(--forest-deep);
margin-bottom: calc(var(--sp-1) / 1);
}
.team-card__rolle {
font-size: .78rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--brass);
margin-bottom: var(--sp-3);
}
.team-card__text { color: var(--ink-soft); }
/* ==================================================================
Startseite "Banner" (19.08.2026, Wunsch Ulli/Aryan)
Vollbild-Foto als Einstieg wie im IONOS-Entwurf — aber mit echtem
Luftbild. Die Startseite wird zum Verteiler: Hero, kurzes Intro,
vier Kacheln zu den Unterseiten, Abschluss-CTA. Inhalte liegen auf
den Unterseiten, nicht mehr hier.
================================================================== */
/* --- Header schwebt transparent ueber dem Banner (nur Startseite) --- */
body.home-banner .site-header {
position: fixed;
inset: 0 0 auto;
background-color: transparent;
}
body.home-banner .site-header:not(.is-scrolled) .brand__name,
body.home-banner .site-header:not(.is-scrolled) .brand__sub,
body.home-banner .site-header:not(.is-scrolled) .nav__link {
color: var(--paper);
}
body.home-banner .site-header:not(.is-scrolled) .nav__link:hover {
color: var(--brass-light);
}
body.home-banner .site-header:not(.is-scrolled) .nav-toggle {
color: var(--paper);
}
body.home-banner .site-header.is-scrolled {
background-color: var(--paper);
}
/* --- Vollbild-Hero --- */
.hero-banner {
position: relative;
min-height: 100svh;
display: grid;
place-items: center;
text-align: center;
color: var(--paper);
overflow: hidden;
isolation: isolate;
}
.hero-banner__bg {
position: absolute;
inset: 0;
z-index: -2;
}
.hero-banner__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 62%;
}
/* Abdunkelung: oben fuer den Header, Mitte fuer den Titel */
.hero-banner::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(ellipse 58% 42% at 50% 45%, rgba(15, 22, 18, .30), transparent 75%),
linear-gradient(rgba(15, 22, 18, .55), rgba(15, 22, 18, .16) 36%,
rgba(15, 22, 18, .20) 68%, rgba(15, 22, 18, .55));
}
.hero-banner__inner {
padding: calc(var(--sp-9) + 40px) var(--sp-5) var(--sp-9);
max-width: 46rem;
}
.hero-banner .eyebrow { color: var(--brass-light); }
.hero-banner__title {
/* Explizit hell: die globale Ueberschriften-Farbe (--ink) wuerde die
Vererbung vom .hero-banner sonst ueberschreiben. */
color: var(--paper);
font-family: var(--font-display);
font-size: clamp(2.6rem, 1.8rem + 4.4vw, 5rem);
font-variation-settings: var(--fraunces-display, "opsz" 144, "SOFT" 40, "WONK" 0);
line-height: 1.02;
letter-spacing: -.015em;
margin: var(--sp-3) 0 var(--sp-4);
text-wrap: balance;
text-shadow: 0 2px 22px rgba(10, 15, 12, .55);
}
.hero-banner__sub {
font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
color: rgba(247, 244, 238, .88);
max-width: 36rem;
margin: 0 auto var(--sp-6);
text-shadow: 0 1px 12px rgba(10, 15, 12, .6);
}
.hero-banner .btn-row { justify-content: center; }
.hero-banner .btn--ghost {
color: var(--paper);
border-color: rgba(247, 244, 238, .55);
}
.hero-banner .btn--ghost:hover {
border-color: var(--paper);
background: rgba(247, 244, 238, .12);
color: var(--paper);
}
.hero-banner__trust {
margin-top: var(--sp-6);
font-size: .92rem;
color: rgba(247, 244, 238, .85);
display: flex;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-5);
justify-content: center;
}
.hero-banner__trust .stars svg { color: var(--brass-light); }
/* --- Vier Wegweiser-Kacheln --- */
.hub-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-6);
}
@media (max-width: 760px) { .hub-grid { grid-template-columns: 1fr; gap: var(--sp-5); } }
.hub-card {
position: relative;
display: block;
border-radius: var(--r-md);
overflow: hidden;
isolation: isolate;
aspect-ratio: 16 / 10;
color: var(--paper);
text-decoration: none;
}
.hub-card__media {
/* Wrapper-Muster wie .hero-banner__bg: ein direkt absolut positioniertes
![]()
wurde im Browser-Pane nicht gemalt — im Wrapper ist es robust. */
position: absolute;
inset: 0;
z-index: 0;
display: block;
}
.hub-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--dur-slow) var(--ease-out-expo);
}
.hub-card:hover .hub-card__media img,
.hub-card:focus-visible .hub-card__media img { transform: scale(1.05); }
.hub-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(rgba(15, 22, 18, .06) 30%, rgba(15, 22, 18, .78));
transition: background-color var(--dur-normal) var(--ease-standard);
}
.hub-card__body {
position: absolute;
inset: auto 0 0;
z-index: 2;
padding: var(--sp-5);
display: grid;
gap: var(--sp-1);
}
.hub-card__kicker {
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--brass-light);
}
.hub-card__title {
font-family: var(--font-display);
font-size: clamp(1.35rem, 1.15rem + .9vw, 1.9rem);
line-height: 1.08;
display: flex;
align-items: center;
gap: var(--sp-2);
}
.hub-card__title svg {
width: 1.05rem;
height: 1.05rem;
flex: none;
transition: transform var(--dur-normal) var(--ease-out-expo);
}
.hub-card:hover .hub-card__title svg { transform: translateX(5px); }
.hub-card__text {
color: rgba(247, 244, 238, .82);
font-size: .95rem;
max-width: 34rem;
}
.hub-card:focus-visible {
outline: 2px solid var(--brass);
outline-offset: 3px;
}
/* ------------------------------------------------------------------
Lade-Platzhalter (19.08.2026): Waehrend ein lazy-Bild noch laedt,
zeigt die Flaeche den Papier-2-Ton statt eines leeren Lochs —
"es laedt" statt "da fehlt was". Logos ausgenommen (transparent).
------------------------------------------------------------------ */
main img[loading="lazy"]:not([src*="logo-"]) {
background-color: var(--paper-2);
}
/* ==================================================================
Raum-Panels (19.08.2026, Aryans Wunsch "getrennte Seiten zum
Hoch- und Runterscrollen fuer jeden Raum")
Jeder Raum ist eine bildschirmfuellende "Folie"; beim Scrollen
rastet die naechste ein (scroll-snap, proximity — die Preistabelle
darunter bleibt frei scrollbar). Detailseiten bleiben verlinkt.
================================================================== */
html:has(.raum-panels) {
scroll-snap-type: y proximity;
scroll-padding-top: 0;
}
.raum-panel {
position: relative;
min-height: 100svh;
display: grid;
align-items: end;
scroll-snap-align: start;
color: var(--paper);
overflow: hidden;
isolation: isolate;
}
.raum-panel__bg {
/* Wrapper-Muster wie .hero-banner__bg — direkt absolutes ![]()
wird
im Vorschau-Pane nicht gemalt. */
position: absolute;
inset: 0;
z-index: 0;
}
.raum-panel__bg img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.raum-panel::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(rgba(15, 22, 18, .42),
rgba(15, 22, 18, .10) 34%, rgba(15, 22, 18, .16) 55%,
rgba(15, 22, 18, .78));
}
.raum-panel__inner {
position: relative;
z-index: 2;
width: min(76rem, 100% - 3rem);
margin-inline: auto;
padding: calc(var(--sp-9) + 60px) 0 var(--sp-8);
}
.raum-panel__kicker {
font-size: .74rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--brass-light);
margin-bottom: var(--sp-2);
}
.raum-panel__title em {
/* Gleicher kursiver Fraunces-Akzent wie in den Seiten-Heros ("Ihr Fest
bekommt drei Tage.") — auf den dunklen Foto-Panels aber in hellem
Messing statt Waldgruen, sonst saeuft der Akzent im Bild ab. */
font-style: italic;
color: var(--brass-light);
font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
}
.raum-panel__title {
color: var(--paper);
font-family: var(--font-display);
font-size: clamp(2.2rem, 1.5rem + 3.6vw, 4.2rem);
font-variation-settings: var(--fraunces-display, "opsz" 144, "SOFT" 40, "WONK" 0);
line-height: 1.03;
letter-spacing: -.015em;
margin-bottom: var(--sp-3);
max-width: 20ch;
text-shadow: 0 2px 18px rgba(10, 15, 12, .5);
text-wrap: balance;
}
.raum-panel__text {
color: rgba(247, 244, 238, .88);
max-width: 40rem;
margin-bottom: var(--sp-4);
text-shadow: 0 1px 10px rgba(10, 15, 12, .55);
}
.raum-panel__meta {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin-bottom: var(--sp-5);
}
.raum-panel__meta .pill {
border-color: rgba(247, 244, 238, .35);
color: var(--paper);
background: rgba(15, 22, 18, .30);
}
.raum-panel__meta .pill--brass {
background: var(--brass);
border-color: var(--brass);
color: #fff;
}
.raum-panel .btn--ghost {
color: var(--paper);
border-color: rgba(247, 244, 238, .55);
}
.raum-panel .btn--ghost:hover {
border-color: var(--paper);
background: rgba(247, 244, 238, .12);
color: var(--paper);
}
/* Scroll-Hinweis nur auf der ersten Folie */
.raum-panel__hint {
position: absolute;
z-index: 2;
left: 50%;
bottom: var(--sp-4);
transform: translateX(-50%);
color: rgba(247, 244, 238, .8);
font-size: .74rem;
letter-spacing: .14em;
text-transform: uppercase;
display: grid;
justify-items: center;
gap: 6px;
pointer-events: none;
}
.raum-panel__hint::after {
content: "";
width: 1px;
height: 34px;
background: linear-gradient(var(--brass-light), transparent);
animation: hintFall 1.8s var(--ease-standard) infinite;
}
@keyframes hintFall {
0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
35% { transform: scaleY(1); opacity: 1; }
100% { transform: scaleY(1) translateY(10px); transform-origin: top; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.raum-panel__hint::after { animation: none; }
html:has(.raum-panels) { scroll-snap-type: none; }
}
/* ------------------------------------------------------------------
Mobilmenue: Untermenues zugeklappt (01.09.2026, Aryans Wunsch)
"Eventlocation" und "Pferdehof" bleiben Links zur Hub-Seite;
der Pfeil daneben klappt das Untermenue auf und zu.
------------------------------------------------------------------ */
.m-nav__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
}
.m-sub-toggle {
flex: none;
width: 44px;
height: 44px;
display: grid;
place-items: center;
background: none;
border: 0;
cursor: pointer;
color: var(--ink-soft);
border-radius: var(--r-sm);
}
.m-sub-toggle svg {
width: 14px;
height: 10px;
transition: transform var(--dur-normal) var(--ease-out-expo);
}
.m-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.m-sub-toggle:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
/* Das hidden-Attribut muss gegen .m-sub { display:grid } gewinnen */
.m-sub[hidden] { display: none; }
/* Nummernzeile ausserhalb des .sec-head-Rasters: Zierlinie sonst ueber die
volle Spaltenbreite statt bis zur Ueberschrift (coaching.html, Abschnitt 05). */
.sec-head__num--tight::after { flex: none; width: clamp(3rem, 12%, 7rem); }