@font-face { font-family:"Geist"; src:url("../fonts/geist-regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Geist"; src:url("../fonts/geist-medium.woff2")  format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Playfair Display"; src:url("../fonts/playfair-regular.woff2") format("woff2"); font-weight:400; font-display:swap; }

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root{

  --schwarz:#0d0d0f;
  --near:#08080a;
  --weiss:#ffffff;
  --grau:#55524c;
  --grau-2:#8d877c;
  --linie:rgba(13, 13, 15, .12);
  --linie-2:rgba(242, 239, 233, .14);
  --papier:#f6f4f0;
  --kohle:#101012;
  --cream:#f2efe9;
  --brass:#897643;
  --brass-2:#b89b64;

  --t12:12px;
  --t13:13px;
  --t16:clamp(15px, 14px + .2vw, 16px);
  --t19:clamp(17px, 15.5px + .35vw, 19px);
  --t24:clamp(20px, 17px + .8vw, 24px);
  --t29:clamp(23px, 19px + 1.1vw, 29px);
  --t37:clamp(28px, 21px + 1.9vw, 37px);
  --t46:clamp(33px, 23px + 2.7vw, 46px);
  --t72:clamp(38px, 24px + 4.2vw, 72px);

  --radius:6px;
  --pad: clamp(20px, 8px + 3.2vw, 56px);
  --luft: clamp(64px, 40px + 6vw, 132px);
  --abschnitt: clamp(38px, 24px + 3.4vw, 76px);
}

html { scroll-behavior:smooth; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--schwarz); color:#fff; padding:12px 20px; font-size:var(--t13);
}
.skip:focus{ left:var(--pad); top:10px; }
body{
  font-family:"Geist", Inter, -apple-system, "Segoe UI", sans-serif;
  background:var(--weiss); color:var(--schwarz);
  font-size:var(--t16); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 0;
}
img{ display:block; max-width:100%; height:auto; }
h1, h2, h3 { font-family:"Playfair Display", Georgia, "Times New Roman", serif; font-weight:400;
             text-wrap:balance; }
.held__unter, .aussage__unten p, .hdr p, .ueber{ text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
  border-radius:2px;
}
.pjk__nav button:focus-visible, .knopf:focus-visible{ outline-offset:2px; }
.voll :focus-visible{ outline-color:#fff; box-shadow:0 0 0 4px rgba(13, 13, 15, .55); }

.mitte{ padding-inline:var(--pad); }

.label{
  font-family:"Geist", sans-serif;
  font-size:var(--t12); letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass); font-weight:500;
}
.dunkel .label, .ende .label { color:var(--brass-2); }
.gross{ font-weight:400; letter-spacing:-.015em; line-height:1.08; }

.kopf{ position:sticky; top:0; z-index:70; transition:padding .45s cubic-bezier(.19, 1, .22, 1); }
.kopf__in{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:62px; padding-inline:var(--pad);
  background:rgba(255, 255, 255, .92); backdrop-filter:saturate(180%) blur(16px);
  border:1px solid transparent; border-bottom-color:var(--linie);
  transition:height .45s cubic-bezier(.19, 1, .22, 1),
             padding .45s cubic-bezier(.19, 1, .22, 1),
             border-radius .45s cubic-bezier(.19, 1, .22, 1),
             box-shadow .45s ease, border-color .45s ease;
}

.kopf.los{
  padding:12px var(--pad);

  background:rgba(255, 255, 255, .94);
  backdrop-filter:saturate(180%) blur(16px);
}
.kopf.los .kopf__in{
  height:56px; padding-inline:clamp(18px, 2vw, 30px);
  background:rgba(246, 244, 240, .94);
  border-color:var(--linie); border-radius:var(--radius);
  box-shadow:0 14px 38px rgba(13, 13, 15, .12);
}
@media (max-width:800px){

  .kopf.los{ padding:10px; background:transparent; backdrop-filter:none; }
  .kopf.los .kopf__in{
    height:54px; padding-inline:16px;
    background:var(--weiss);
    border:1px solid var(--linie); border-radius:var(--radius);
    box-shadow:0 10px 30px rgba(13, 13, 15, .14);
  }

  .kopf--film.los .kopf__auf,
  .kopf--film.los .lang a[aria-current="page"]{ color:var(--schwarz); }
  .kopf--film.los{ background:transparent; }
}

@media (prefers-reduced-motion: reduce){ .kopf, .kopf__in{ transition:none; } }
.kopf img{ height:19px; width:auto; }
.kopf nav{ display:flex; gap:28px; }
.kopf nav a{ font-size:var(--t13); color:var(--grau); }
.kopf nav a:hover{ color:var(--brass); }
.kopf__rechts{ display:flex; align-items:center; gap:20px; }
.kopf__tel{ font-size:var(--t13); }
.lang{ display:flex; align-items:center; gap:2px; font-size:var(--t12); letter-spacing:.1em; }

.lang > span{ color:var(--grau); }
.lang a{ color:var(--grau); padding:4px 5px; }
.lang a[aria-current="page"]{ color:var(--schwarz); text-decoration:underline; text-underline-offset:3px; }
.lang a:hover{ color:var(--schwarz); }
@media (max-width:520px){ .kopf__tel{ display:none; } }

.kopf__auf{ display:none; }
.menue__kopf{ display:none; }
.menue__kontakt{ display:none; }

@media (max-width:800px){
  .kopf__in{ justify-content:flex-start; gap:16px; }
  .kopf__rechts{ margin-left:auto; }
  .kopf nav{ flex-wrap:wrap; gap:14px 20px; }

  .js .kopf__auf{
    order:9;
    display:inline-flex; align-items:center; min-height:44px; padding:0 2px;
    background:none; border:0; cursor:pointer;
    font:inherit; font-size:var(--t13); color:inherit;
  }

  .js .kopf nav{
    display:none;
    position:fixed; inset:10px 10px auto 10px; z-index:120;
    flex-direction:column; gap:0;
    background:var(--weiss); border-radius:var(--radius);
    padding:0 20px 6px;
    box-shadow:0 24px 60px rgba(13, 13, 15, .28);
  }
  .js .kopf nav.offen{ display:flex; }

  .js .menue__kopf{
    display:flex; align-items:center; justify-content:space-between;
    margin:0; padding:18px 0 16px;
    border-bottom:1px solid var(--linie);
  }
  .menue__marke{
    font-size:var(--t19); letter-spacing:.06em; color:var(--schwarz);
  }
  .menue__zu{
    background:none; border:0; padding:6px 2px; cursor:pointer;
    font:inherit; font-size:var(--t13); color:var(--grau);
  }
  .menue__zu:hover{ color:var(--schwarz); }

  .js .kopf nav a{
    padding:16px 0; font-size:var(--t16); color:var(--schwarz);
    border-bottom:1px solid var(--linie);
  }
  .js .kopf nav a:last-child{ border-bottom:0; }

  .js .menue__kontakt{ display:block; margin:0; padding:16px 0 18px;
                       font-size:var(--t13); color:var(--grau); line-height:1.9; }
  .menue__kontakt a{ color:var(--schwarz); }
  .menue__kontakt a:hover{ color:var(--brass); }

  .js body.menue-offen{ overflow:hidden; }

  .js body.menue-offen .merk{ z-index:50; }
}

@media (pointer:coarse){
  .pjk__nav button{ width:44px; height:44px; }
}

.aussage{ padding-block:var(--luft) clamp(40px,24px + 3vw,72px); }
.aussage h1{
  font-size:var(--t46); font-weight:400; letter-spacing:-.014em; line-height:1.16;
  max-width:26ch; margin-top:26px;
}
.aussage h1 em{ font-style:normal; color:var(--brass); }
.aussage__unten{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  flex-wrap:wrap; margin-top:44px; padding-top:20px; border-top:1px solid var(--linie);
}
.aussage__unten p{ color:var(--grau); max-width:46ch; font-size:var(--t16); }
.pfeil{ font-size:var(--t13); display:inline-flex; align-items:center; gap:8px; }
.pfeil::after{ content:"→"; transition:transform .3s; }
.pfeil:hover::after{ transform:translateX(4px); }

.voll__mehr{ display:flex; justify-content:flex-end; padding-inline:var(--pad); }
.voll{ position:relative; margin-top:clamp(12px,8px + .8vw,20px); }

.voll::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:rgba(13, 13, 15, 0); transition:background .45s ease;
}
.held.offen::after{ background:rgba(13, 13, 15, .38); }
.pjk{ z-index:1; }

.pjk__daten{ display:none; }
.voll > img{ width:100%; height:clamp(340px,46vw,660px); object-fit:cover; }

.pjk{
  position:static;
  width:100%;
  display:flex; flex-direction:row; align-items:center; gap:16px;
  background:var(--weiss); border-radius:var(--radius);
  padding:clamp(10px, 1vw, 14px);
  box-shadow:0 22px 55px rgba(13, 13, 15, .26);
  transition:width .55s cubic-bezier(.19, 1, .22, 1);
}
.pjk__mini{
  flex:none; overflow:hidden; border-radius:4px; background:var(--papier);
  width:76px; height:58px;
  transition:width .55s cubic-bezier(.19, 1, .22, 1),
             height .55s cubic-bezier(.19, 1, .22, 1);
}
.pjk__zeile{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex:1; min-width:0; }

.held.offen .pjk{ flex-direction:column; align-items:stretch; gap:16px; width:100%; }
.held.offen .pjk__mini{ width:100%; height:clamp(320px, 44vh, 560px); }
.held.offen .pjk__zeile{ flex:none; }
.pjk__mini img{ width:100%; height:100%; object-fit:cover; }
.pjk__txt{ flex:1; min-width:0; }
.pjk__txt .label{ display:block; margin-bottom:3px; }
.pjk__name{ display:block; font-size:var(--t24); font-weight:400; letter-spacing:-.012em; line-height:1.15; }
.pjk__ort{ display:block; font-size:var(--t13); color:var(--grau); margin-top:2px; }
.pjk__nav{ display:flex; gap:8px; flex:none; }
.pjk__nav button{
  width:36px; height:36px; border:1px solid var(--linie); border-radius:var(--radius);
  background:transparent; color:var(--schwarz); cursor:pointer; font:inherit; font-size:14px; line-height:1;
  transition:background .25s, color .25s, border-color .25s;
}
.pjk__nav button:hover{ background:var(--brass); border-color:var(--brass); color:#fff; }

@media (max-width:700px){

  .pjk{ position:static; width:auto; min-width:0; margin:0 var(--pad);
        flex-direction:row; align-items:center; gap:12px; padding:10px; }

  .pjk__nav{ gap:6px; }
  .pjk__nav button{ width:40px; height:40px; }
  .pjk__mini{ width:64px !important; height:52px !important; }
  .pjk__zeile{ flex:1; min-width:0; gap:10px; }
  .pjk__name{ font-size:var(--t19); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pjk__ort{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
             overflow:hidden; line-height:1.3; }
  .pjk__txt .label{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .pjk, .pjk__mini{ transition:none; }
}

.idx{ padding-block:var(--abschnitt); }
.idx__kopf{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; flex-wrap:wrap; margin-bottom:clamp(28px,18px + 1.6vw,52px); }
.idx__reihe{ border-top:1px solid var(--linie); }
.idx__z{
  display:grid; gap:6px 32px; grid-template-columns:56px minmax(0, 1fr); align-items:start;
  padding:clamp(22px,16px + 1vw,34px) 0; border-bottom:1px solid var(--linie);
  transition:padding-left .4s cubic-bezier(.76,0,.24,1);
}
.idx__z:hover{ padding-left:12px; }
@media (min-width:860px){
  .idx__z{ grid-template-columns:56px minmax(220px, 1.1fr) 2fr 90px; align-items:baseline; }
  .idx__d{ grid-column:auto; }
}
.idx__nr{ font-size:var(--t13); color:var(--grau); }
.idx__t{ font-size:var(--t24); font-weight:400; letter-spacing:-.012em; }
.idx__d{ color:var(--grau); max-width:52ch; grid-column:2; min-width:0; }
.idx__m{ font-size:var(--t13); color:var(--grau); text-align:right; transition:color .3s; }
.idx__z:hover .idx__m{ color:var(--brass); }
@media (max-width:859px){ .idx__m{ display:none; } }

.werk{ background:var(--papier); padding:var(--luft) 0; }
.werk__kopf{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; flex-wrap:wrap; margin-bottom:clamp(28px,18px + 1.6vw,52px); }
.werk__gitter{ display:grid; gap:clamp(24px,14px + 1.6vw,40px); }
@media (min-width:840px){ .werk__gitter{ grid-template-columns:1fr 1fr; } }
.werk figure:first-child{ grid-column:1 / -1; }
.werk img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.werk figure:first-child img{ aspect-ratio:21/9; }
.werk figcaption{ display:flex; justify-content:space-between; gap:16px; padding-top:12px; font-size:var(--t13); }
.werk figcaption span:last-child{ color:var(--grau); }

.anw{ padding-block:var(--abschnitt); }
.anw__gitter{ display:grid; gap:1px; background:var(--linie);
              border-top:1px solid var(--linie); border-bottom:1px solid var(--linie);
              margin-top:clamp(24px,16px + 1.4vw,40px); }
@media (min-width:820px){ .anw__gitter{ grid-template-columns:repeat(4, 1fr); } }
.anw__z{ background:var(--weiss); padding:clamp(20px,14px + 1vw,30px) clamp(16px,10px + .8vw,26px); }
.anw__z h3{ font-size:var(--t19); font-weight:400; letter-spacing:-.01em; margin-bottom:14px; }
.anw__z ul{ list-style:none; display:grid; gap:7px; }
.anw__z li{ font-size:var(--t13); color:var(--grau); line-height:1.5; }

.mus{ padding-block:var(--abschnitt); }
.mus__spur{ display:flex; gap:14px; overflow-x:auto; padding-inline:var(--pad);
            margin-top:clamp(24px,16px + 1.4vw,40px);
            scroll-snap-type:x mandatory; scrollbar-width:none; }
.mus__spur::-webkit-scrollbar{ display:none; }
.mus__spur figure{ flex:0 0 clamp(170px,20vw,240px); scroll-snap-align:start; }
.mus__spur img{ width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:var(--radius); }
.mus__spur figcaption{ margin-top:10px; font-size:var(--t13); color:var(--grau); }

.faq{ padding-block:var(--abschnitt); }
.faq__liste{ border-top:1px solid var(--linie); margin-top:clamp(24px,16px + 1.4vw,40px); }
.faq details{ border-bottom:1px solid var(--linie); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; gap:24px; align-items:baseline;
  padding:clamp(18px,14px + .8vw,28px) 0; font-size:var(--t19); letter-spacing:-.01em;
  font-family:"Playfair Display", Georgia, serif;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; margin-left:auto; color:var(--brass); font-family:"Geist",sans-serif; font-size:1.3rem; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq__a{ padding:0 0 clamp(20px,16px + .8vw,30px); color:var(--grau); }
.faq__a p + p{ margin-top:.9rem; }

.snap{ padding-block:var(--abschnitt); }
.snap__gitter{ display:grid; gap:1px; background:var(--linie); border-top:1px solid var(--linie); border-bottom:1px solid var(--linie); margin-top:clamp(24px,16px + 1.4vw,40px); }
@media (min-width:720px){ .snap__gitter{ grid-template-columns:repeat(4, 1fr); } }
.snap__z{ background:var(--weiss); padding:clamp(22px,16px + 1vw,32px) clamp(16px,10px + .8vw,26px); }
.snap__z b{ display:block; font-family:"Playfair Display",Georgia,serif; font-size:var(--t37); font-weight:400; letter-spacing:-.02em; line-height:1; }
.snap__z span{ display:block; color:var(--grau); font-size:var(--t13); margin-top:10px; max-width:28ch; }

.weg{ padding-block:var(--abschnitt); }
.weg__gitter{ display:grid; gap:clamp(24px,14px + 1.8vw,48px); margin-top:clamp(26px,18px + 1.4vw,44px); }
@media (min-width:760px){ .weg__gitter{ grid-template-columns:repeat(4, 1fr); } }
.weg__z b{ display:block; font-size:var(--t13); color:var(--grau); font-weight:400; margin-bottom:14px; }
.weg__z h3{ font-size:var(--t19); font-weight:400; letter-spacing:-.01em; margin-bottom:8px; }
.weg__z p{ color:var(--grau); font-size:var(--t16); }

.ende{ background:var(--papier); color:var(--schwarz); padding-block:var(--luft); }
.ende .label{ color:var(--brass); }
.ende h2{ font-size:var(--t37); font-weight:400; letter-spacing:-.015em; line-height:1.14; max-width:20ch; margin-top:22px; }

.ende__text{ color:var(--grau); font-size:var(--t16); max-width:58ch; margin-top:18px; }
.ende__reihe{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.knopf{
  display:inline-flex; align-items:center; gap:10px; border:1px solid var(--linie);
  color:var(--schwarz);
  padding:14px 26px; font-size:var(--t13); border-radius:var(--radius); transition:background .25s, border-color .25s;
}
.knopf:hover{ background:rgba(13, 13, 15, .05); border-color:rgba(13, 13, 15, .3); }
.knopf--voll{ background:var(--brass); color:#fff; border-color:var(--brass); }
.knopf--voll:hover{ background:#9c874d; border-color:#9c874d; }

.fuss{ background:var(--weiss); color:var(--grau); padding:0 0 clamp(80px,60px + 2vw,110px);
       font-size:var(--t13); border-top:1px solid var(--linie); }
.fuss__gitter{ display:grid; gap:32px; padding-top:clamp(34px,24px + 1.6vw,54px); }
@media (min-width:760px){ .fuss__gitter{ grid-template-columns:2fr 1fr 1fr 1fr; } }
.fuss h2, .fuss h3, .fuss h4{ font-family:"Geist",sans-serif; font-size:var(--t12); letter-spacing:.14em; text-transform:uppercase; color:var(--brass); font-weight:500; margin-bottom:14px; }
.fuss ul{ list-style:none; display:grid; gap:8px; }
.fuss a:hover{ color:var(--brass); }
.fuss__ende{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:clamp(34px,24px + 1.6vw,54px); padding-top:20px; border-top:1px solid var(--linie); color:var(--grau); }
.fuss__ende u{ text-decoration:underline; text-underline-offset:3px; }

.js .auf{
  opacity:0;
  clip-path:inset(100% 0 0 0);
  filter:blur(5px);
  transform:translateY(14px);
  transition:opacity .55s ease-out,
             clip-path .95s cubic-bezier(.19, 1, .22, 1),
             filter .6s ease-out,
             transform .95s cubic-bezier(.19, 1, .22, 1);
}
.js .auf.da{ opacity:1; clip-path:inset(0 0 0 0); filter:blur(0); transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .auf{ opacity:1 !important; transform:none !important; filter:none !important;
             clip-path:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .idx__z, .idx__m, .pfeil::after{ transition:none !important; }
}

.sekt{ padding-block:var(--abschnitt); }
.sekt__kopf{ display:flex; justify-content:space-between; align-items:baseline;
             gap:24px; flex-wrap:wrap; margin-bottom:clamp(20px,14px + 1vw,34px); }
.sekt__kopf h2{ font-size:var(--t24); font-weight:400; letter-spacing:-.012em; }
.sekt__zahl{ font-size:var(--t13); color:var(--grau); }

.kacheln{ display:grid; gap:clamp(14px,8px + .8vw,22px);
          grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); }
.kachel{ position:relative; }
.kachel__bild{ overflow:hidden; border-radius:var(--radius); background:var(--papier);
               aspect-ratio:2/3; }
.kachel__bild img{ width:100%; height:100%; object-fit:cover; display:block;
                   transition:transform .7s cubic-bezier(.4, 0, .2, 1); }
.kachel:hover .kachel__bild img{ transform:scale(1.04); }
.kachel__zeile{ display:flex; align-items:flex-start; justify-content:space-between;
                gap:12px; padding-top:12px; }
.kachel__name{ font-size:var(--t16); line-height:1.3; }
.kachel__name span{ display:block; font-size:var(--t12); letter-spacing:.14em;
                    text-transform:uppercase; color:var(--brass); margin-bottom:3px; }
.kachel__knopf{
  flex:none; width:34px; height:34px; border:1px solid var(--linie); border-radius:var(--radius);
  background:transparent; cursor:pointer; position:relative; font:inherit;
  transition:background .25s, border-color .25s;
}
.kachel__knopf::before,
.kachel__knopf::after{ content:""; position:absolute; left:50%; top:50%; background:var(--schwarz);
                       transform:translate(-50%,-50%); transition:background .25s, opacity .25s; }
.kachel__knopf::before{ width:13px; height:1px; }
.kachel__knopf::after{ width:1px; height:13px; }
.kachel__knopf:hover{ border-color:var(--brass); }
.kachel__knopf[aria-pressed="true"]{ background:var(--brass); border-color:var(--brass); }
.kachel__knopf[aria-pressed="true"]::before{ background:#fff; }
.kachel__knopf[aria-pressed="true"]::after{ opacity:0; }

.merk{
  position:fixed; inset:auto 0 0 0; z-index:80;
  background:rgba(246, 244, 240, .96); backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--linie);
  transform:translateY(100%); transition:transform .45s cubic-bezier(.19, 1, .22, 1);
}
.merk.offen{ transform:none; }
.merk__in{ display:flex; align-items:center; gap:20px; flex-wrap:wrap;
           padding:14px var(--pad); }
.merk__n{ font-size:var(--t13); display:flex; align-items:baseline; gap:8px; flex:none; }
.merk__n b{ font-family:"Playfair Display", Georgia, serif; font-size:var(--t24); font-weight:400; }
.merk__liste{ flex:1; min-width:0; font-size:var(--t13); color:var(--grau);
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.merk__weg{ flex:none; background:none; border:0; font:inherit; font-size:var(--t13);
            color:var(--grau); cursor:pointer; text-decoration:underline; }
.merk__weg:hover{ color:var(--brass); }

.formular{ display:grid; gap:22px; }
.paar{ display:grid; gap:22px; }
@media (min-width:640px){ .paar{ grid-template-columns:1fr 1fr; } }
.feld{ display:grid; gap:7px; }
.feld label{ font-size:var(--t12); letter-spacing:.14em; text-transform:uppercase; color:var(--grau); }
.feld input, .feld textarea, .feld select{
  font:inherit; font-size:var(--t16); color:var(--schwarz);
  background:transparent; border:0; border-bottom:1px solid var(--linie);
  padding:9px 0; width:100%; border-radius:0;
}
.feld input::placeholder, .feld textarea::placeholder{ font-size:var(--t13); color:var(--grau); opacity:.75; }
.feld input:focus, .feld textarea:focus, .feld select:focus{ outline:none; border-bottom-color:var(--brass); }
.feld textarea{ min-height:96px; resize:vertical; }
.pflicht{ color:var(--brass); }

.sternhinweis{ display:block; font-size:var(--t12); color:var(--grau); margin-bottom:4px; }
.opt-hint{ text-transform:none; letter-spacing:0; color:var(--grau); }
.falle{ position:absolute; left:-9999px; }

.gewaehlt{ border-top:1px solid var(--linie); padding-top:18px; }
.gewaehlt__t{ font-size:var(--t12); letter-spacing:.14em; text-transform:uppercase;
              color:var(--grau); margin-bottom:10px; }
.gewaehlt__l{ display:flex; flex-wrap:wrap; gap:8px; min-height:34px; }
.gewaehlt__l:empty::after{ content:"Noch nichts gewählt. Oben in der Übersicht auf das Pluszeichen tippen.";
                           font-size:var(--t13); color:var(--grau); }
.marke{ font-size:var(--t13); border:1px solid var(--linie); border-radius:var(--radius);
        padding:5px 11px; }

.zustimmung{ display:flex; gap:12px; align-items:flex-start; font-size:var(--t13); color:var(--grau); }
.zustimmung input{ width:16px; height:16px; margin-top:3px; flex:none; accent-color:var(--brass); }
.zustimmung a{ color:inherit; text-decoration:underline; }
.zustimmung a:hover{ color:var(--brass); }

.bestell{ display:grid; gap:clamp(30px,20px + 3vw,64px); }
@media (min-width:1000px){ .bestell{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:start; } }
.bestell h2{ font-size:var(--t37); font-weight:400; letter-spacing:-.015em; margin-top:14px; }
.bestell__text{ color:var(--grau); margin-top:14px; max-width:46ch; }
.kontaktzeile{ margin-top:26px; display:grid; gap:6px; font-size:var(--t16); }
.kontaktzeile a{ text-decoration:underline; text-underline-offset:3px; }
.kontaktzeile a:hover{ color:var(--brass); }
.kontaktzeile address{ font-style:normal; color:var(--grau); font-size:var(--t13); margin-top:10px; line-height:1.6; }

.block{ font-size:var(--t12); letter-spacing:.14em; text-transform:uppercase;
        color:var(--brass); margin-top:14px; padding-bottom:10px;
        border-bottom:1px solid var(--linie); }
.formular > .block:first-child{ margin-top:0; }

.sec{ padding-block:var(--abschnitt); }
.sec.dark{ background:var(--papier); }

.wrap{ padding-inline:var(--pad); }

.brotkrume{ font-size:var(--t13); color:var(--grau); padding-block:18px 0; }
.brotkrume a{ text-decoration:underline; text-underline-offset:3px; }
.brotkrume a:hover{ color:var(--brass); }

.hdr{ margin-bottom:clamp(20px,14px + 1vw,34px); }
.hdr .label{ display:block; margin-bottom:12px; }
.hdr h1, .hdr h2{ font-size:var(--t37); font-weight:400; letter-spacing:-.015em; max-width:24ch; }
.hdr p{ font-size:var(--t19); color:var(--grau); max-width:70ch; margin-top:14px; letter-spacing:-.005em; }
.hdr p.hdr__breit{ max-width:none; }

.copy{ max-width:70ch; color:var(--grau); font-size:var(--t16); line-height:1.65; }
.copy p + p{ margin-top:1.1rem; }
.copy strong, .copy b{ color:var(--schwarz); font-weight:500; }
.copy a{ color:var(--schwarz); text-decoration:underline; text-underline-offset:3px; }
.copy a:hover{ color:var(--brass); }
.plain{ max-width:70ch; color:var(--grau); }

.jump{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.jump{ display:grid; gap:0; border-top:1px solid var(--linie); margin-top:22px; }
@media (min-width:760px){ .jump{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1200px){ .jump{ grid-template-columns:repeat(3, 1fr); } }
.jump a{ background:var(--weiss); padding:18px 20px; display:block;
         border-bottom:1px solid var(--linie);
         transition:background .25s, padding-left .35s cubic-bezier(.76, 0, .24, 1); }
@media (min-width:760px){
  .jump a{ border-right:1px solid var(--linie); }
  .jump a:nth-child(2n){ border-right:0; }
}
@media (min-width:1200px){
  .jump a:nth-child(2n){ border-right:1px solid var(--linie); }
  .jump a:nth-child(3n){ border-right:0; }
}
.jump a strong{ display:block; font-size:var(--t16); font-weight:400; color:var(--schwarz);
                margin-bottom:5px; }
.jump a span{ display:block; font-size:var(--t13); color:var(--grau); line-height:1.5; }
.jump a:hover{ background:var(--papier); padding-left:26px; }
.jump a:hover strong{ color:var(--brass); }

.data{ border-top:1px solid var(--linie); margin-top:18px; }
.data__row{ display:grid; gap:4px 28px; padding:14px 0; border-bottom:1px solid var(--linie); }
@media (min-width:640px){ .data__row{ grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); align-items:baseline; } }
.data__k{ font-size:var(--t13); letter-spacing:.06em; color:var(--schwarz); }
.data__v{ font-size:var(--t16); color:var(--grau); }

.datagrid{ display:grid; gap:clamp(24px,16px + 1.6vw,44px); margin-top:22px; }
@media (min-width:860px){ .datagrid{ grid-template-columns:1fr 1fr; } }
.datagrid__col h2, .datagrid__col h3{ font-size:var(--t19); font-weight:400; letter-spacing:-.01em; margin-bottom:10px; }

.edit{ border-top:1px solid var(--linie); margin-top:22px; }
.edit__row{ display:grid; gap:8px 32px; padding:clamp(18px,14px + .8vw,28px) 0;
            border-bottom:1px solid var(--linie); }
@media (min-width:860px){ .edit__row{ grid-template-columns:56px minmax(220px,1fr) minmax(0,1.6fr); align-items:baseline; } }
.edit__idx{ font-size:var(--t13); color:var(--grau); }
.edit__row h2, .edit__row h3{ font-size:var(--t24); font-weight:400; letter-spacing:-.012em; }
.edit__row h2 small, .edit__row h3 small{ display:block; font-family:"Geist",sans-serif; font-size:var(--t12);
                     letter-spacing:.14em; text-transform:uppercase; color:var(--brass);
                     margin-bottom:6px; }
.edit__body{ color:var(--grau); }
.edit__body p + p{ margin-top:.8rem; }

.note{ border-left:2px solid var(--brass); padding:4px 0 4px 16px; margin-top:22px; max-width:70ch; }
.note b{ display:block; font-size:var(--t12); letter-spacing:.14em; text-transform:uppercase;
         color:var(--brass); margin-bottom:6px; font-weight:500; }
.note p{ color:var(--grau); font-size:var(--t16); }

.demo{ border-bottom:1px dotted var(--brass); }

.docs{ border-top:1px solid var(--linie); margin-top:22px; }
.docs__row{ display:grid; gap:6px 24px; padding:14px 0; border-bottom:1px solid var(--linie); }
a.docs__row{ color:inherit; text-decoration:none; }
a.docs__row:hover .docs__name{ text-decoration:underline; text-underline-offset:3px; }
@media (min-width:720px){ .docs__row{ grid-template-columns:15em minmax(0,1fr) 11em; align-items:baseline; }
  .docs__tag{ text-align:right; } }
.docs__name{ font-size:var(--t16); }
.docs__desc{ font-size:var(--t13); color:var(--grau); }
.docs__tag{ font-size:var(--t12); letter-spacing:.1em; text-transform:uppercase; color:var(--brass); }

.story{ display:grid; gap:clamp(24px,16px + 2vw,52px); }
@media (min-width:1000px){ .story{ grid-template-columns:1fr 1fr; align-items:start; } }
.story__media img{ width:100%; border-radius:var(--radius); }
.story__step h3{ font-size:var(--t19); font-weight:400; margin-bottom:8px; }
.story__step p{ color:var(--grau); }
.story__text > * + *{ margin-top:clamp(22px,16px + 1.2vw,36px); }

.arrow{ font-size:var(--t13); }
.cta, .cta--dark{ display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--brass); background:var(--brass); color:#fff;
  padding:13px 24px; font-size:var(--t13); border-radius:var(--radius);
  transition:background .25s, border-color .25s; }
.cta:hover, .cta--dark:hover{ background:#9c874d; border-color:#9c874d; }

.trap, .falle{ position:absolute !important; left:-9999px !important; }

.f{ display:grid; gap:7px; }
.f label{ font-size:var(--t12); letter-spacing:.14em; text-transform:uppercase; color:var(--grau); }
.f input, .f textarea, .f select{
  font:inherit; font-size:var(--t16); color:var(--schwarz);
  background:transparent; border:0; border-bottom:1px solid var(--linie);
  padding:9px 0; width:100%; border-radius:0;
}
.f input::placeholder, .f textarea::placeholder{ font-size:var(--t13); color:var(--grau); opacity:.75; }
.f input:focus, .f textarea:focus, .f select:focus{ outline:none; border-bottom-color:var(--brass); }
.f textarea{ min-height:96px; resize:vertical; }

.agree{ display:flex; gap:12px; align-items:flex-start; font-size:var(--t13); color:var(--grau); margin-top:4px; }
.agree input{ width:16px; height:16px; margin-top:3px; flex:none; accent-color:var(--brass); }
.agree a{ color:inherit; text-decoration:underline; }
.agree a:hover{ color:var(--brass); }

.gate{ display:grid; gap:22px; max-width:640px; margin-top:22px; }
.gate__row{ display:grid; gap:22px; }
@media (min-width:640px){ .gate__row{ grid-template-columns:1fr 1fr; } }

.fuss__hoch{ text-align:right; margin:0; }
.hoch{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--grau); font-size:var(--t13);
  transition:color .25s;
}
.hoch:hover{ color:var(--brass); }
.hoch span{ transition:transform .25s; }
.hoch:hover span{ transform:translateY(-2px); }
@media (prefers-reduced-motion: reduce){ .hoch, .hoch span{ transition:none; } }

.vergleich{ position:relative; overflow:hidden; border-radius:var(--radius); background:var(--papier);
            --x:50%; touch-action:pan-y; }
.vergleich img{ width:100%; height:100%; object-fit:cover; display:block; }
.vergleich__a{ aspect-ratio:4/3; }
.vergleich__b{ position:absolute; inset:0; clip-path:inset(0 0 0 var(--x)); }

.vergleich__linie{ position:absolute; top:0; bottom:0; left:var(--x); width:2px;
                   background:rgba(255, 255, 255, .9); pointer-events:none;
                   box-shadow:0 0 0 1px rgba(13, 13, 15, .25); }
.vergleich__griff{ position:absolute; top:50%; left:var(--x); width:44px; height:44px;
                   transform:translate(-50%, -50%); border-radius:50%;
                   background:rgba(255, 255, 255, .94); backdrop-filter:blur(6px);
                   display:grid; place-items:center; pointer-events:none;
                   color:var(--schwarz); font-size:14px; letter-spacing:-.1em;
                   box-shadow:0 4px 16px rgba(13, 13, 15, .28); }

.vergleich__regler{
  position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
  opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; background:transparent;
}
.vergleich__regler:focus-visible ~ .vergleich__griff{ outline:2px solid var(--brass); outline-offset:3px; }

.vergleich__marke{ position:absolute; bottom:14px; font-size:var(--t12); letter-spacing:.12em;
                   text-transform:uppercase; color:#fff; background:rgba(13, 13, 15, .55);
                   padding:6px 12px; border-radius:var(--radius); pointer-events:none; }
.vergleich__links{ left:14px; }
.vergleich__rechts{ right:14px; }

.vergleich__hinweis{ font-size:var(--t13); color:var(--grau); margin-top:12px; }
.beleg{ margin-top:clamp(20px,14px + 1vw,32px); }
.beleg img{ width:100%; border-radius:var(--radius); }
.beleg figcaption{ font-size:var(--t13); color:var(--grau); margin-top:10px; }

.beleg--klein{ margin:0 0 14px; max-width:340px; }
.beleg--klein img{ aspect-ratio:3/2; object-fit:cover; }
.beleg--klein figcaption{ font-size:var(--t12); letter-spacing:.06em; margin-top:8px; }

.sub{ font-size:var(--t24); font-weight:400; letter-spacing:-.012em; margin-bottom:14px; }

.recht{ display:grid; gap:clamp(28px,18px + 2vw,56px); margin-top:clamp(24px,16px + 1.4vw,40px); }
@media (min-width:960px){ .recht{ grid-template-columns:1fr 1fr; align-items:start; } }
.recht__block{ break-inside:avoid; }
.recht__block + .recht__block{ margin-top:clamp(26px,18px + 1.4vw,40px); }
.recht h2{ font-size:var(--t19); font-weight:400; letter-spacing:-.01em; margin-bottom:10px;
           padding-bottom:8px; border-bottom:1px solid var(--linie); }
.recht .copy{ font-size:var(--t13); line-height:1.6; }

.zeit{ display:grid; gap:1px; background:var(--linie);
       border-block:1px solid var(--linie); margin-top:clamp(24px,16px + 1.4vw,40px); }
@media (min-width:760px){ .zeit{ grid-template-columns:repeat(3, 1fr); } }
.zeit__z{ background:var(--weiss); padding:clamp(22px,16px + 1vw,32px) clamp(16px,10px + .8vw,26px); }
.zeit__z b{ font-family:"Playfair Display", Georgia, serif; font-size:clamp(2.4rem,1.6rem + 3vw,4rem);
            font-weight:400; letter-spacing:-.03em; line-height:1; display:inline-block; }
.zeit__e{ font-size:var(--t12); letter-spacing:.14em; text-transform:uppercase;
          color:var(--brass); margin-left:10px; }
.zeit__z p{ color:var(--grau); font-size:var(--t16); margin-top:14px; max-width:36ch; }

.bildpaar{ display:grid; gap:clamp(16px,10px + 1.2vw,28px); margin-top:clamp(26px,18px + 1.6vw,44px); }
@media (min-width:860px){ .bildpaar{ grid-template-columns:1fr 1fr; align-items:start; } }
.bildpaar figure{ margin:0; }
.bildpaar img{ width:100%; border-radius:var(--radius); }
.bildpaar > figure:last-child img{ aspect-ratio:4/3; object-fit:cover; }
.bildpaar figcaption{ font-size:var(--t13); color:var(--grau); margin-top:10px; }

.steuert{ margin-top:clamp(30px,20px + 1.8vw,52px); padding-top:clamp(22px,16px + 1vw,32px);
          border-top:1px solid var(--linie); max-width:70ch; }
.steuert h2{ font-size:var(--t24); font-weight:400; letter-spacing:-.012em; margin-bottom:12px; }
.steuert p{ color:var(--grau); }
.steuert p + p{ margin-top:14px; }

.hinw{ color:var(--brass); white-space:nowrap; }

.ueber{ font-size:var(--t19); color:var(--grau); max-width:64ch;
        letter-spacing:-.005em; line-height:1.5; margin-top:4px; }

.claim + .ueber{ margin-top:clamp(14px, 10px + .6vw, 22px); }
.claim{ overflow-wrap:break-word; font-family:"Playfair Display", Georgia, "Times New Roman", serif;
        font-size:var(--t46); font-weight:400; letter-spacing:-.014em; line-height:1.1;
        margin-top:clamp(18px, 12px + .8vw, 30px); color:var(--schwarz); }

.werte{ list-style:none; display:flex; flex-wrap:wrap; gap:clamp(20px,12px + 2.2vw,54px);
        margin-top:clamp(28px, 18px + 1.6vw, 46px); }
.werte__z{ display:flex; align-items:center; gap:12px; min-width:0;
           font-size:var(--t13); letter-spacing:.02em; color:var(--schwarz); }
.werte__ic{ width:30px; height:30px; flex:0 0 auto; fill:var(--brass); }
@media (max-width:700px){ .werte{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 16px; } }

.held{ position:relative; min-height:100svh; display:grid; align-items:end;
       grid-template-columns:minmax(0, 1fr);
       background:var(--kohle); overflow:hidden; }
.held__still, .held__video{ position:absolute; inset:0; width:100%; height:100%;
                            object-fit:cover; }
.held__video{ display:none; pointer-events:none; }
.held.film .held__video{ display:block; }
.held.film .held__still{ display:none; }
.held__schleier{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(13,13,15,.50) 0%, rgba(13,13,15,.10) 34%, rgba(13,13,15,.78) 100%); }

.held__in{ position:relative; z-index:1; min-width:0;
           padding:0 var(--pad) clamp(110px, 15vh, 180px); }
.held .label{ color:var(--brass-2); }
.held h1{ color:#fff; font-size:var(--t46); font-weight:400; letter-spacing:-.014em;
          line-height:1.16; max-width:20ch; margin-top:16px; }
.held h1 em{ font-style:normal; color:var(--brass-2); }
.held__unter{ color:rgba(255, 255, 255, .82); font-size:var(--t19); max-width:58ch; margin-top:20px; }
.held__pfeil{ display:inline-flex; margin-top:24px; color:#fff; }

.held .pjk{ z-index:2; }

@media (max-width:700px){

  .held{ min-height:100svh; }

  .held__in{ padding:0 var(--pad) clamp(126px, 19vh, 165px); }
  .held h1, .held__unter{ max-width:100%; }
}

.kopf--film{ position:fixed; top:0; left:0; right:0; }

.kopf--film:not(.los){ background:transparent; }
.kopf--film:not(.los) .kopf__in{ background:transparent; backdrop-filter:none;
                           border-color:transparent; }
.kopf--film:not(.los) nav a,
.kopf--film:not(.los) .kopf__tel,
.kopf--film:not(.los) .lang a{ color:rgba(255, 255, 255, .82); }
.kopf--film:not(.los) nav a:hover,
.kopf--film:not(.los) .lang a[aria-current="page"]{ color:#fff; }
.kopf--film:not(.los) .logo-hell{ display:block; }
.kopf--film:not(.los) .logo-dunkel{ display:none; }
.kopf .logo-hell{ display:none; }
@media (max-width:700px){

  .kopf--film:not(.los) .kopf__auf{ color:#fff; }

  .kopf--film:not(.los) nav a{ color:var(--schwarz); }
}

.voll__mehr{ padding-block:clamp(14px,10px + .6vw,22px); }
.held.offen .held__schleier{ background:linear-gradient(180deg, rgba(13,13,15,.62) 0%, rgba(13,13,15,.42) 34%, rgba(13,13,15,.82) 100%); }

.held__ecke{ position:absolute; right:var(--pad); bottom:clamp(40px, 9vh, 96px); z-index:2;
             display:grid; gap:12px;
             width:min(540px, calc(100vw - var(--pad) * 2));
             transition:width .55s cubic-bezier(.19, 1, .22, 1); }
.held.offen .held__ecke{ width:min(520px, calc(100vw - var(--pad) * 2)); }
.held__mehr{ text-align:right; }
.held__mehr a{ color:#fff; }
.held__mehr a:hover{ color:var(--brass-2); }
@media (max-width:700px){
  .held__ecke{ right:0; left:0; bottom:clamp(16px, 3vh, 28px); padding:0;
               width:auto; max-width:none; justify-items:stretch; }
  .held__mehr{ display:none; }
}

@media (max-width:700px){
  .idx__d, .anw__z ul, .anw__z li, .snap__z span, .weg__z p,
  .copy, .plain, .hdr p, .ueber, .faq__a, .bestell__text{ max-width:100%; }
  .idx__kopf{ gap:10px 16px; }
  .sekt__kopf, .idx__kopf, .werk__kopf{ align-items:flex-start; }
}

.fuss__kontakt{ margin-top:12px; }
.luft-klein{ margin-top:22px; }
.luft-mittel{ margin-top:26px; }
.luft-gross{ margin-top:44px; }
.lesebreite{ max-width:820px; }
.notiz{ margin-top:22px; color:var(--grau); font-size:var(--t13); }
.vorspann{ color:var(--grau); max-width:66ch; font-size:var(--t19); letter-spacing:-.01em; }

@media (min-width:801px){ .kopf--film.los{ background:rgba(255, 255, 255, .94); } }

.refs{ display:grid; gap:clamp(20px,12px + 1.4vw,34px); margin-top:22px;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ref img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius); display:block; }
.ref h3{ font-size:var(--t19); font-weight:400; letter-spacing:-.01em; margin-top:14px; }
.ref__ort{ font-size:var(--t12); letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin-top:4px; }
.ref p:not(.ref__ort){ font-size:var(--t13); color:var(--grau); line-height:1.6; margin-top:8px; }
.kachel__text{ font-size:var(--t13); color:var(--grau); line-height:1.55; margin-top:8px; }

.held--hell .held__schleier{ background:linear-gradient(180deg, rgba(13,13,15,.42) 0%, rgba(13,13,15,.14) 26%, rgba(13,13,15,.72) 62%, rgba(13,13,15,.92) 100%); }
.brotkrume + .hdr{ margin-top:16px; }
.filme{ display:grid; gap:clamp(18px,12px + 1vw,30px); margin-top:22px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.filme video{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius);
  background:var(--papier); display:block; }
.filme figcaption{ margin-top:10px; font-size:var(--t13); color:var(--grau); line-height:1.55; }