@font-face{font-family:"Inter"; font-style:normal; font-weight:300;
  font-display:swap; src:url(/schrift/inter-300-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter"; font-style:normal; font-weight:300;
  font-display:swap; src:url(/schrift/inter-300-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter"; font-style:normal; font-weight:400;
  font-display:swap; src:url(/schrift/inter-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter"; font-style:normal; font-weight:400;
  font-display:swap; src:url(/schrift/inter-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter"; font-style:normal; font-weight:500;
  font-display:swap; src:url(/schrift/inter-500-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter"; font-style:normal; font-weight:500;
  font-display:swap; src:url(/schrift/inter-500-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --grund:#fff; --schrift:#181818; --zweit:#4a4a4a; --leise:#8c8c8c;
  --linie:#181818; --fokus:#0057ff;
  --overlay:rgba(28,28,28,.82); --overlay-schrift:#fff; --fuss-rand:#181818; --linie-zart:#e2e2e2;
  --rand:clamp(1.25rem,4vw,3rem); --luft:clamp(1rem,2.4vw,2.2rem);
}
@media (prefers-color-scheme:dark){
  :root{ --grund:#111; --schrift:#ededed; --zweit:#b4b4b4; --leise:#8a8a8a;
         --linie:#6a6a6a; --fokus:#7aa2ff; --fuss-rand:#6a6a6a; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--grund); color:var(--schrift);
  font:300 15px/1.55 "Helvetica Neue",Inter,Helvetica,Arial,sans-serif;
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column}
main{width:100%; flex:1 0 auto}
.fuss{flex:0 0 auto}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--fokus); outline-offset:2px}
.sprung{position:absolute; left:-9999px; top:0; z-index:99; background:var(--grund);
  padding:.75rem 1rem; border:1px solid var(--schrift)}
.sprung:focus{left:1rem; top:.5rem}
.kopf{display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:1.1rem clamp(1.25rem,3vw,2rem); border-bottom:1px solid var(--linie);
  position:sticky; top:0; background:var(--grund); z-index:20}
html.menue-offen .kopf, .kopf:hover, .kopf:focus-within{z-index:90}
.marke{font-size:clamp(1rem,4.2vw,1.45rem); font-weight:300; letter-spacing:.055em;
  white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis}
.kopf-menue{display:contents}
.rechts{display:flex; align-items:center; gap:1.4rem}
.haupt-nav > ul{display:flex; list-style:none; margin:0; padding:0}
.haupt-nav > ul > li + li{border-left:1px solid var(--linie)}
.haupt-nav > ul > li > a{display:block; padding:.35rem 1.05rem; font-size:.94rem; white-space:nowrap}
.haupt-nav a:hover{text-decoration:underline; text-underline-offset:.3em}
.haupt-nav a[aria-current]{color:var(--leise)}
.haupt-nav > ul{align-items:center}
.hat-unter{position:relative; display:flex; align-items:center}
.aufklapp{background:none; border:0; cursor:pointer; color:var(--leise);
  padding:.35rem .9rem .35rem 0; display:flex; align-items:center;
  line-height:inherit; font-size:.94rem}
.aufklapp svg{width:15px; height:15px; stroke:currentColor; stroke-width:1.6; fill:none;
  transition:transform .15s}
.aufklapp[aria-expanded="true"] svg{transform:rotate(180deg)}
.hat-unter > a{padding-right:.4rem}
.untermenue{position:absolute; top:100%; left:0; min-width:12.5rem; margin:0; padding:.35rem 0;
  list-style:none; background:var(--grund); border:1px solid var(--linie);
  display:none; flex-direction:column; z-index:30}
.hat-unter.offen .untermenue, .hat-unter:hover .untermenue,
.hat-unter:focus-within .untermenue{display:flex}
.untermenue a{display:block; padding:.6rem 1.05rem; color:var(--leise); font-size:.9rem}
.untermenue a:hover{color:var(--schrift)}
.untermenue a[aria-current]{color:var(--schrift)}
.sozial{display:flex; align-items:center; gap:.85rem}
.sozial a{display:flex; align-items:center; justify-content:center; width:26px; height:26px}
.sozial svg{width:17px; height:17px; fill:currentColor}
.knopf{display:none; background:none; border:0; cursor:pointer; color:inherit;
  width:44px; height:44px; margin:-9px; align-items:center; justify-content:center}
.knopf svg{width:23px; height:23px; stroke:currentColor; stroke-width:1.4; fill:none}
.knopf .zu{display:none}
.knopf[aria-expanded="true"] .auf{display:none}
.knopf[aria-expanded="true"] .zu{display:block}
main{padding:2.4rem var(--rand) 5rem; max-width:calc(940px + 2 * var(--rand));
  margin-inline:auto}
main.start{max-width:none; margin:0}
h1, .text-seite h2, .name, .mitte .vorspann{
  font-weight:400; letter-spacing:.01em;
  padding:0 0 .4rem; border:0; border-bottom:1px solid var(--linie-zart);
  width:auto; min-width:0}
h1{font-size:1.55rem; color:var(--schrift); margin:0 0 2.2rem}
.text-seite h2, .name, .mitte .vorspann{font-size:1.2rem; color:var(--zweit)}
.recht hr{border:0; border-top:1px solid var(--linie-zart); margin:2.4rem 0 1.6rem}
.recht blockquote{margin:1rem 0 0; padding:.2rem 0 .2rem 1.1rem;
  border-left:1px solid var(--linie-zart); color:var(--zweit)}
.recht blockquote p{margin:0 0 1rem}
.raster{display:grid; gap:var(--luft); grid-template-columns:minmax(0,1fr)}
@media (min-width:480px){ .raster{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:700px){ .raster{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1080px){ .raster{grid-template-columns:repeat(4,minmax(0,1fr))} }
.raster figure{margin:0; position:relative}
.raster a{display:block; position:relative; line-height:0}
.raster picture{display:block}
.raster img{display:block; width:100%; height:auto; background:var(--linie-zart)}
.teilen{position:absolute; right:.55rem; bottom:.55rem; width:34px; height:34px;
  background:none; border:0; cursor:pointer; color:#fff; opacity:0; z-index:2;
  display:flex; align-items:center; justify-content:center; transition:opacity .18s}
.teilen svg{width:16px; height:16px; stroke:currentColor; stroke-width:1.5; fill:none}
@media (hover:hover){
  .raster figure:hover .teilen{opacity:1}
}
.teilen:focus-visible{opacity:1}
@media (hover:none){
  .teilen{opacity:.55}
}
.teilen.kopiert::after{content:"link copied"; position:absolute; right:0; bottom:110%;
  white-space:nowrap; font-size:.7rem; background:var(--overlay); color:#fff;
  padding:.3rem .5rem}
.hinweis{position:absolute; inset:0; background:var(--overlay); color:var(--overlay-schrift);
  padding:1.15rem 1.25rem; opacity:0; transition:opacity .18s ease;
  display:flex; flex-direction:column; gap:.5rem}
.raster a:hover .hinweis,
.raster a:focus-visible .hinweis{opacity:1}
.hinweis b{font-weight:400; font-size:.95rem; line-height:1.3}
.hinweis span{font-size:.76rem; line-height:1.5; color:#dcdcdc; white-space:pre-line;
  overflow:hidden; min-height:0}
.fuss{position:sticky; bottom:0; z-index:15; padding:0; pointer-events:none}
.fuss-kasten{width:min(980px, calc(100% - 2 * var(--rand))); margin:0 auto; pointer-events:auto;
  background:var(--grund); border:1px solid var(--fuss-rand);
  padding:.2rem clamp(.6rem,1.4vw,1rem); font-size:.78rem; color:var(--schrift);
  display:flex; flex-wrap:wrap; gap:.2rem 1.5rem; justify-content:space-between;
  line-height:1.45}
.wenn-breit{display:inline}
@media (max-width:700px){
  .wenn-breit{display:none}
  .fuss-kasten{font-size:clamp(.58rem,2.75vw,.72rem);
    padding:.28rem .6rem; gap:.2rem .8rem;
    flex-wrap:nowrap; white-space:nowrap}
  .fuss-kasten > :first-child{min-width:0; overflow:hidden; text-overflow:ellipsis}
}
@media (max-width:939px){
  .knopf{display:flex}
  .kopf{position:sticky}
  .kopf-menue{display:block; position:fixed; top:var(--kopf-h,4.4rem); right:0;
    width:max-content; min-width:11rem; max-width:min(70%, 17rem); z-index:25;
    max-height:calc(100dvh - var(--kopf-h,4.4rem)); overflow-y:auto;
    background:color-mix(in srgb, var(--grund) 90%, transparent);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);
    backdrop-filter:blur(14px) saturate(1.2);
    border-left:1px solid var(--linie); border-bottom:1px solid var(--linie);
    transform:translateX(100%); opacity:0; visibility:hidden;
    transition:transform .28s cubic-bezier(.22,.61,.36,1), opacity .22s ease,
               visibility 0s linear .28s}
  .kopf-menue.offen{transform:none; opacity:1; visibility:visible;
    transition-delay:0s, 0s, 0s}
  @supports not (background:color-mix(in srgb, #fff 90%, transparent)){
    .kopf-menue{background:var(--grund)}
  }
  .haupt-nav{display:block; width:100%}
  .haupt-nav > ul{flex-direction:column; align-items:stretch}
  .haupt-nav > ul > li{width:100%}
  .haupt-nav > ul > li + li{border-left:0; border-top:1px solid var(--linie-zart)}
  .haupt-nav > ul > li > a{padding:.8rem 1.1rem; text-align:right; font-size:.95rem;
    min-height:44px; display:flex; align-items:center; justify-content:flex-end}
  .hat-unter{display:block; position:static}
  .hat-unter > a{padding-right:1.1rem}
  .aufklapp{display:flex; position:absolute; left:.6rem; top:0; height:44px;
    padding:0 .4rem; align-items:center; color:var(--leise)}
  .haupt-nav > ul > li.hat-unter{position:relative}
  .aufklapp svg{transform:rotate(180deg)}
  .aufklapp[aria-expanded="true"] svg{transform:none}
  .untermenue{display:flex; position:static; border:0; padding:0; min-width:0;
    background:none}
  .hat-unter.zu .untermenue{display:none}
  .untermenue a{padding:.6rem 1.1rem; text-align:right; font-size:.86rem;
    min-height:40px; display:flex; align-items:center; justify-content:flex-end;
    border-top:1px solid var(--linie-zart)}
  .rechts{width:100%; justify-content:flex-end; gap:1.1rem;
    padding:.75rem 1.1rem; border-top:1px solid var(--linie)}
  h1{font-size:1.35rem; margin-bottom:1.6rem}
  .text-seite h2, .name, .mitte .vorspann{font-size:1.1rem}
}
@media (hover:none){
  .hinweis{transition:none}
  .raster a:focus .hinweis{opacity:1}
}
.kein-js .haupt-nav{display:block}
.kein-js .kopf-menue{transform:none; opacity:1; visibility:visible; position:static;
  width:100%; max-height:none; border:0; backdrop-filter:none}
.unter{display:none}
@media (hover:none){
  .hinweis{display:none}
  .unter{display:block; margin-top:.55rem}
  .unter b{display:block; font-weight:400; font-size:.9rem}
  .unter span{display:block; font-size:.72rem; line-height:1.45; color:var(--leise);
    white-space:pre-line; margin-top:.15rem}
}
.ansicht{width:100%}
body:not(.kein-js) .bilderwechsel{display:grid; grid-template-columns:minmax(0,1fr);
  align-items:center}
body:not(.kein-js) .bilderwechsel .ansicht{grid-area:1 / 1;
  transition:opacity .35s ease, visibility 0s linear .35s}
body:not(.kein-js) .bilderwechsel .ansicht:not(.aktiv){opacity:0; visibility:hidden}
body:not(.kein-js) .bilderwechsel .ansicht.aktiv{transition:opacity .35s ease, visibility 0s}
body:not(.kein-js) .bilderwechsel .ansichten{grid-area:2 / 1}
body.kein-js .ansichten{display:none}
body.kein-js .ansicht + .ansicht{margin-top:1rem}
@media (prefers-reduced-motion:reduce){
  body:not(.kein-js) .bilderwechsel .ansicht,
  body:not(.kein-js) .bilderwechsel .ansicht.aktiv{transition:none}
}
.ansichten{display:flex; flex-wrap:wrap; gap:.5rem; list-style:none;
  margin:.85rem 0 0; padding:0; justify-content:center}
.ansichten button{padding:0; border:1px solid transparent; background:none;
  cursor:pointer; line-height:0; border-radius:0}
.ansichten button img{width:56px; height:56px; max-width:none; max-height:none;
  object-fit:cover; display:block; opacity:.55; transition:opacity .2s ease}
.ansichten button[aria-current] img{opacity:1}
.ansichten button[aria-current]{border-color:var(--linie)}
.ansichten button:hover img{opacity:.85}
.ansichten button:focus-visible{outline:2px solid var(--linie); outline-offset:2px}
.werk{display:grid; gap:clamp(1.25rem,3vw,2rem); align-items:center;
  grid-template-columns:minmax(0,1fr);
  padding:clamp(1.5rem,4vw,3rem) clamp(1.25rem,4vw,3.5rem) 4rem}
.werk-bild{display:flex; flex-direction:column; align-items:center;
  justify-content:center; min-width:0}
.werk > .werk-bild:has(.ansichten){align-self:start}
.bilderwechsel picture{display:block; line-height:0}
.werk-bild .ansicht img{display:block; height:auto; margin-inline:auto;
  width:min(var(--natur,100%), 100%, calc((100vh - 19rem) * var(--seite,1)));
  width:min(var(--natur,100%), 100%, calc((100svh - 19rem) * var(--seite,1)))}
.werk-bild img, .produkt-bild img, .dia-spur img{-webkit-touch-callout:none;
  -webkit-user-select:none; user-select:none; -webkit-user-drag:none}
.werk-text h1{font-size:1.15rem; font-weight:500; margin:0 0 1rem;
  border:0; padding:0; min-width:0}
.werk-text p{font-size:.88rem; line-height:1.6; color:var(--schrift); margin:0;
  white-space:pre-line}
.werk-text .im-shop{margin:.9rem 0 0; font-size:.82rem; color:var(--leise)}
.werk-text .im-shop a{color:var(--leise); text-decoration:underline;
  text-underline-offset:.22em; text-decoration-thickness:1px}
.werk-text .im-shop a:hover{color:var(--schrift)}
.werk-leiste{position:sticky; top:0; z-index:15; background:var(--grund);
  display:flex; align-items:center; justify-content:space-between;
  padding:.5rem clamp(1.25rem,4vw,3.5rem); border-bottom:1px solid var(--linie)}
.werk-leiste a, .werk-leiste span{display:flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; color:var(--leise); font-size:.8rem}
.werk-leiste a:hover{color:var(--schrift)}
.werk-leiste svg{width:19px; height:19px; stroke:currentColor; stroke-width:1.4; fill:none}
.blaettern{display:flex; align-items:center; gap:.35rem}
.blaettern .aus{opacity:.25; pointer-events:none}
@media (max-width:939px){
  .werk-leiste{position:fixed; left:0; right:0; top:auto;
    bottom:var(--fuss-hoehe,26px); z-index:14; padding:0;
    border-top:1px solid var(--linie); border-bottom:0}
  .blaettern{display:contents}
  .werk-leiste a, .werk-leiste span{flex:1 1 0; min-width:0; height:56px}
  .blaettern a[rel=prev]{order:1}
  .blaettern span{order:2}
  .blaettern a[rel=next]{order:3}
  .werk-leiste > a{order:4}
  .blaettern a + a, .werk-leiste > a{border-left:1px solid var(--linie-zart)}
  .werk-leiste svg{width:22px; height:22px}
  .werk{padding-bottom:calc(56px + 1.5rem)}
}
@media (max-width:800px){
  .werk{gap:1.25rem}
  .werk-bild .ansicht img{width:min(var(--natur,100%), 100%, calc(62vh * var(--seite,1)))}
  .werk-text h1{font-size:1.05rem}
}
@media (max-width:899px){
  .werk > .werk-text{justify-self:end}
}
@media (min-width:801px) and (max-width:899px){
  .werk-bild .ansicht img{
    width:min(var(--natur,100%), 100%, calc((100vh - 26rem) * var(--seite,1)));
    width:min(var(--natur,100%), 100%, calc((100svh - 26rem) * var(--seite,1)))}
}
@media (min-width:900px){
  .werk{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); column-gap:clamp(2rem,3vw,3.5rem); max-width:none}
  .werk > .werk-bild{grid-column:2; grid-row:1}
  .werk > .werk-text{grid-column:3; grid-row:1; max-width:19rem}
  .werk-bild .ansicht img{
    width:min(var(--natur,100%), calc(100vw - clamp(36rem, 36rem + (100vw - 900px) * .334, 50rem)), calc((100vh - 19rem) * var(--seite,1)));
    width:min(var(--natur,100%), calc(100vw - clamp(36rem, 36rem + (100vw - 900px) * .334, 50rem)), calc((100svh - 19rem) * var(--seite,1)))}
}
.nur-vorlesen{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
main.start{padding:0}
.hero{line-height:0}
.hero img{width:100%; height:auto; display:block; max-height:calc(100vh - 12rem);
  object-fit:cover; object-position:center}
.einleitung{padding:2.2rem var(--rand) 4rem; max-width:44rem}
.einleitung p{margin:0 0 .9rem}
.raster.uebersicht{grid-template-columns:minmax(0,1fr); max-width:940px}
@media (min-width:560px){ .raster.uebersicht{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:900px){ .raster.uebersicht{grid-template-columns:repeat(3,minmax(0,1fr))} }
.uebersicht figcaption{margin-top:.6rem; font-size:.9rem; color:var(--schrift)}
.uebersicht a:hover figcaption{text-decoration:underline; text-underline-offset:.3em}
.text-seite p{margin:0 0 1.1rem; max-width:40rem}
.text-seite h2{margin:2.4rem 0 .9rem}
.text-seite a{border-bottom:1px solid var(--linie-zart)}
.text-seite a:hover{border-color:currentColor; text-decoration:none}
.portraet{margin:0 0 2.4rem; line-height:0; max-width:34rem}
.portraet img{width:100%; height:auto}
.jahr{display:grid; grid-template-columns:4.5rem 1fr; gap:0 1rem; margin:0 0 .3rem}
.jahr h2{grid-column:1; margin:.45rem 0 0; border:0; padding:0; font-size:.95rem;
  color:var(--leise)}
.jahr ul{grid-column:2; list-style:none; margin:0; padding:.45rem 0 .9rem}
.jahr li{margin:0 0 .35rem}
.vorspann{color:var(--leise); margin-bottom:2rem}
.block{margin:0 0 3.4rem}
.formular{display:grid; gap:.45rem; max-width:26rem}
.formular.lang{max-width:34rem}
.formular label{font-size:.8rem; color:var(--leise)}
.formular input, .formular textarea{font:inherit; color:inherit; background:var(--grund);
  border:1px solid var(--linie-zart); padding:.65rem .7rem; min-height:44px; width:100%}
.formular textarea{min-height:8rem; resize:vertical}
.formular input:focus, .formular textarea:focus{border-color:var(--schrift); outline:none}
.formular.zeile{display:flex; flex-wrap:wrap; gap:.6rem; align-items:stretch;
  max-width:30rem}
.formular.zeile input[type=email]{flex:1 1 12rem; min-width:0; margin:0}
.formular.zeile button{margin:0; flex:0 0 auto}
.formular.zeile .hinweis-zeile{flex:1 0 100%; margin:.2rem 0 0; font-size:.85rem;
  min-height:1.3em; color:var(--leise)}
.formular.zeile .hinweis-zeile.gut{color:var(--schrift)}
.formular.zeile .hinweis-zeile.schlecht{color:#b00020}
.falle{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.formular.zeile{position:relative}
.formular.zeile .hinweis-zeile:empty{position:absolute; left:0; bottom:0; width:1px; height:1px;
  margin:0; padding:0; overflow:hidden; clip-path:inset(50%)}
.klein{font-size:.8rem; color:var(--leise); margin:.8rem 0 0}
.kontakt{max-width:calc(860px + 2 * var(--rand))}
.kontakt-raster{display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start}
.kontakt h2{font-size:.78rem; font-weight:400; letter-spacing:.1em;
  text-transform:uppercase; color:var(--leise);
  margin:2.2rem 0 .5rem; padding:0; border:0}
.kontakt-raster > div > *:first-child{margin-top:0}
.kontakt p{margin:0 0 .8rem; max-width:32rem}
.kontakt address{font-style:normal; line-height:1.7}
.mail-zeile a{border-bottom:1px solid var(--linie-zart)}
.mail-zeile a:hover{border-color:currentColor; text-decoration:none}
.sozial-reihe{display:flex; gap:.9rem; list-style:none; margin:0; padding:0}
.sozial-reihe a{display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:0; color:var(--schrift); opacity:.75;
  transition:opacity .2s ease}
.sozial-reihe a:hover{opacity:1; text-decoration:none}
.sozial-reihe svg{width:21px; height:21px; fill:currentColor}
.recht-zeile a{border-bottom:1px solid var(--linie-zart)}
@media (max-width:700px){
  .kontakt-raster{grid-template-columns:minmax(0,1fr); gap:0}
  .kontakt-raster > div + div > h2:first-child{margin-top:2.6rem}
}
.liste-schlicht{list-style:none; margin:0; padding:0}
.liste-schlicht li{margin:0 0 .45rem}
.formular button{font:inherit; margin-top:.7rem; padding:.7rem 1.6rem; min-height:44px;
  background:var(--schrift); color:var(--grund); border:0; cursor:pointer;
  justify-self:start; letter-spacing:.03em}
.formular button:hover{opacity:.85}
.kontakt .klein{margin-top:.9rem}
.klein{font-size:.85rem; color:var(--leise); margin-top:.9rem}
address{font-style:normal; line-height:1.75}
@media (max-width:560px){
  .jahr{grid-template-columns:1fr; gap:0}
  .jahr h2{grid-column:1; margin-top:1.4rem}
  .jahr ul{grid-column:1; padding-top:.2rem}
}
body.startseite{height:100vh; height:100dvh; overflow:hidden}
body.kein-js.startseite{height:auto; overflow:visible}
body.startseite main.start{flex:1 1 auto; min-height:0; display:flex}
body.startseite .hero{flex:1 1 auto; min-height:0; position:relative}
body.startseite .hero picture{position:absolute; inset:0; display:block}
body.startseite .hero img{width:100%; height:100%; object-fit:cover;
  object-position:center; max-height:none; display:block}
body.startseite .fuss{position:fixed; left:0; right:0; bottom:0}
.dia{display:none}
@media (max-width:699px){
  body.startseite .hero{display:none}
  body.startseite .dia{display:block; position:relative; flex:1 1 auto; min-height:0;
    background:var(--grund); isolation:isolate}
}
.dia-spur{position:relative; height:100%; margin:0; padding:0; list-style:none;
  overflow:hidden; touch-action:pan-y}
.dia-spur:focus-visible{outline:2px solid var(--linie); outline-offset:-3px}
.dia-blatt{position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .7s ease, transform .75s cubic-bezier(.22,.61,.36,1)}
.dia-blatt.aktiv{opacity:1; transform:none; pointer-events:auto}
.dia-blatt.weg{opacity:0}
.dia-blatt[data-schwenk] img{object-position:var(--von, 50%) center; transition:none}
.dia-blatt[data-schwenk].aktiv img{object-position:var(--bis, 50%) center;
  transition:object-position 3.4s cubic-bezier(.36,0,.2,1)}
.dia-blatt[data-schwenk].weg img{object-position:var(--bis, 50%) center;
  transition:none}
.dia-schluss{padding:0 1.5rem 5rem}
.dia-blatt picture{display:block; width:100%; height:100%}
.dia-blatt img{width:100%; height:100%; object-fit:cover; object-position:center;
  display:block}
body.kein-js .dia-blatt{opacity:0}
body.kein-js .dia-blatt:first-child{opacity:1; transform:none; position:static; width:100%}
.dia-schluss p{margin:0; text-align:center; line-height:1.5}
.dia-schluss b{display:block; font-weight:400; letter-spacing:.13em;
  text-transform:uppercase; font-size:1.15rem}
.dia-schluss span{display:block; margin-top:.5rem; color:var(--leise);
  font-size:.9rem; letter-spacing:.04em}
.dia-leiste{position:absolute; left:0; right:0; z-index:16;
  bottom:calc(var(--fuss-hoehe, 66px) + .55rem);
  display:flex; align-items:center; justify-content:center}
body.kein-js .dia-leiste{display:none}
.dia-punkte{display:flex; gap:7px; margin:0; padding:0; list-style:none}
.dia-punkte button{width:20px; height:26px; padding:0; border:0; background:none;
  cursor:pointer; display:grid; place-items:center}
.dia-punkte button::before{content:""; width:100%; height:2px; border-radius:1px;
  background:#181818; opacity:.32; transition:opacity .3s ease;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.95))}
.dia-punkte button[aria-current]::before{opacity:1}
.dia-halt{position:absolute; right:.7rem; bottom:0;
  width:26px; height:26px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; color:#181818; opacity:.5;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.95))}
.dia-halt svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8}
.dia-halt .pause path{stroke-linecap:round}
.dia-halt .lauf{display:none; fill:currentColor; stroke:none}
.dia-halt[aria-pressed="true"] .pause{display:none}
.dia-halt[aria-pressed="true"] .lauf{display:block}
.dia-punkte button:focus-visible, .dia-halt:focus-visible{
  outline:2px solid var(--linie); outline-offset:1px}
@media (prefers-reduced-motion:reduce){
  .dia-blatt{transition:opacity .2s ease}
  .dia-blatt, .dia-blatt.weg{transform:none !important}
  .dia-blatt[data-schwenk] img, .dia-blatt[data-schwenk].aktiv img{
    object-position:var(--bis, 50%) center; transition:none}
}
.zwei-spalten{display:grid; gap:48px; align-items:start;
  grid-template-columns:minmax(0,356fr) minmax(0,529fr); margin-bottom:3rem}
.zwei-spalten .portraet{margin:0; max-width:none}
.name{margin:0 0 .9rem}
.spalte-text > *:first-child{margin-top:0}
.spalte-text p{font-size:.95rem}
@media (max-width:820px){
  .zwei-spalten{grid-template-columns:1fr; gap:1.5rem}
  .zwei-spalten .portraet{order:-1}
}
.zitate{position:relative; margin:0 0 3.4rem; padding:2.4rem clamp(2.6rem,7vw,4.5rem);
  text-align:center}
.zitat-buehne{min-height:9rem; display:flex; align-items:center; justify-content:center}
.zitat{margin:0; max-width:44rem}
.zitat blockquote{margin:0 0 1.1rem; font-size:.95rem; line-height:1.65; quotes:none}
.zitat figcaption{font-size:.8rem; color:var(--leise)}
.zitat-pfeil{position:absolute; top:50%; transform:translateY(-50%); background:none;
  border:0; cursor:pointer; color:var(--leise); width:44px; height:44px;
  display:flex; align-items:center; justify-content:center}
.zitat-pfeil:hover{color:var(--schrift)}
.zitat-pfeil svg{width:20px; height:20px; stroke:currentColor; stroke-width:1.4; fill:none}
.zitat-pfeil.zurueck{left:0}
.zitat-pfeil.vor{right:0}
.zitat-punkte{display:flex; gap:.55rem; justify-content:center; margin-top:1.6rem}
.zitat-zaehler{display:none}
@media (max-width:640px){
  .zitat-punkte{display:none}
  .zitat-zaehler{display:block; margin:1.4rem 0 0; font-size:.8rem; color:var(--leise);
    font-variant-numeric:tabular-nums}
}
.zitat-punkte button{width:22px; height:22px; padding:0; background:none; border:0;
  cursor:pointer; position:relative}
.zitat-punkte button::before{content:""; position:absolute; inset:8px;
  border-radius:50%; background:transparent; border:1px solid var(--schrift)}
.zitat-punkte button[aria-current]::before{background:var(--schrift)}
.uebersicht img{background:var(--linie-zart)}
.kein-js .zitat[hidden]{display:block}
.kein-js .zitat-pfeil, .kein-js .zitat-punkte{display:none}
.kein-js .zitat-buehne{flex-direction:column; gap:2rem}
.mitte{text-align:center}
.streifen{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.8rem;
  margin:0 0 3rem}
.streifen figure{margin:0; line-height:0; transition:opacity .7s ease;
  aspect-ratio:1 / 1; overflow:hidden}
.streifen img{width:100%; height:100%; object-fit:cover; display:block}
.streifen-punkte{display:none}
.mitte .vorspann{display:block; margin:0 0 2.4rem; text-align:center}
.mitte .jahr{display:block; margin:0 0 2rem}
.mitte .jahr h2{font-size:1.05rem; font-weight:300; color:var(--schrift);
  margin:0 0 .5rem; border:0; padding:0}
.mitte .jahr ul{padding:0; margin:0}
.mitte .jahr li{margin:0 0 .3rem}
@media (max-width:700px){
  .streifen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .streifen figure:nth-child(5){grid-column:span 2}
  body:not(.kein-js) .streifen{grid-template-columns:minmax(0,1fr); gap:0;
    margin:0 auto 1rem; aspect-ratio:1 / 1; max-width:15rem}
  body:not(.kein-js) .streifen figure{grid-area:1 / 1; opacity:0;
    aspect-ratio:auto; overflow:visible; min-height:0}
  body:not(.kein-js) .streifen figure.sichtbar{opacity:1}
  body:not(.kein-js) .streifen img{width:100%; height:100%; object-fit:contain}
  body:not(.kein-js) .streifen-punkte{display:flex; justify-content:center; gap:.55rem;
    margin:0 0 2.6rem}
  .streifen-punkte button{width:22px; height:22px; padding:0; background:none; border:0;
    cursor:pointer; position:relative}
  .streifen-punkte button::before{content:""; position:absolute; inset:8px;
    border-radius:50%; background:transparent; border:1px solid var(--schrift)}
  .streifen-punkte button[aria-current]::before{background:var(--schrift)}
}
@media (prefers-reduced-motion:reduce){ .streifen figure{transition:none} }
.uebersicht figure{position:relative}
.uebersicht .rahmen{display:block; overflow:hidden; line-height:0}
.uebersicht img{width:100%; height:auto; display:block;
  transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.uebersicht a:hover img, .uebersicht a:focus-visible img{transform:scale(1.02)}
.uebersicht figcaption{margin-top:.9rem; font-size:.95rem; color:var(--schrift);
  text-align:center}
.uebersicht a:hover figcaption{text-decoration:none}
@media (prefers-reduced-motion:reduce){
  .uebersicht img{transition:none}
  .uebersicht a:hover img, .uebersicht a:focus-visible img{transform:none}
}
.interviews{list-style:disc; margin:0 0 1.2rem; padding-left:1.15rem}
.interviews li{margin:0 0 .3rem; font-size:.95rem}
.interviews a{font-style:italic; border-bottom:1px solid var(--linie-zart)}
.interviews a:hover{border-color:currentColor}
.zitat-buehne{position:relative}
.zitat-buehne.weich{transition:height .45s ease}
.zitat{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; margin:0 auto;
  opacity:0; visibility:hidden; transition:opacity .7s ease}
.zitat.sichtbar{opacity:1; visibility:visible}
@media (prefers-reduced-motion:reduce){ .zitat{transition:none} .zitat-buehne.weich{transition:none} }
.kein-js .zitat{position:static; transform:none; opacity:1; visibility:visible}
.kein-js .zitat-buehne{position:static}
.zitat figcaption a{border-bottom:1px solid var(--linie-zart)}
.zitat figcaption a:hover{border-color:currentColor}
.mail-gross{margin:0 0 .6rem}
.mail-gross a{border-bottom:1px solid var(--linie-zart)}
.mail-gross a:hover{border-color:currentColor}
.fuss-kasten a{border-bottom:0}
.fuss-kasten a:hover{text-decoration:underline; text-underline-offset:.2em}
.suchfeld{margin:0 0 .4rem}
.suchfeld input{width:100%; max-width:34rem; box-sizing:border-box;
  font:inherit; font-size:1rem; color:inherit; background:none;
  border:0; border-bottom:1px solid var(--linie);
  padding:.5rem .2rem; -webkit-appearance:none; appearance:none; border-radius:0}
.suchfeld input:focus{outline:none; border-bottom-width:2px; padding-bottom:calc(.5rem - 1px)}
.suchfeld input::placeholder{color:var(--leise)}
.such-stand{margin:0 0 1.6rem; min-height:1.4em;
  font-size:.85rem; color:var(--leise)}
.such-galerien{list-style:none; margin:.6rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem}
@media (max-width:700px){
  .suchfeld input{font-size:16px}
}
.suchseite .unter{display:block; margin-top:.5rem; line-height:1.35}
.suchseite .unter b{display:block; font-weight:400; font-size:.9rem}
.suchseite .unter span{display:block; font-size:.72rem; color:var(--leise)}
.suchseite .raster figure{margin:0}
.suchseite .raster img{width:100%; height:auto; display:block}
.such-punkt{display:flex; align-items:center; gap:.5rem}
.lupe{display:none; width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round}
@media (min-width:940px){
  .lupe{display:block}
  .such-wort{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
}
.shop-raster{display:grid; gap:var(--luft); grid-template-columns:repeat(2,minmax(0,1fr))}
.karte{display:flex; flex-direction:column; gap:.15rem; color:inherit; text-decoration:none}
.karte picture{display:block; margin-bottom:.6rem; overflow:hidden}
.karte img{display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover;
  background:var(--linie-zart); transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.karte:hover img, .karte:focus-visible img{transform:scale(1.02)}
.karte-titel{font-weight:400}
.karte-zeile{font-size:.85rem; color:var(--zweit)}
.karte-preis{font-size:.9rem; margin-top:.2rem}
.karte:hover .karte-titel{text-decoration:underline; text-underline-offset:.3em}
.vergriffen{margin-left:.6rem; font-size:.78rem; color:var(--leise); letter-spacing:.04em}
.produkt{display:grid; gap:1.6rem; grid-template-columns:minmax(0,1fr); align-content:start}
.produkt img{display:block; width:100%; height:auto; background:var(--linie-zart)}
.produkt video{display:block; width:100%; height:auto; background:#000}
.produkt-bild .ansicht img{width:auto; max-width:100%; margin-inline:auto;
  max-height:calc(100vh - 18rem); max-height:calc(100svh - 18rem)}
.produkt-bild .ansicht video{max-height:calc(100vh - 18rem); max-height:calc(100svh - 18rem);
  background:transparent}
.produkt-bild .ansichten{flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start}
.produkt-bild .ansichten li:first-child{margin-left:auto}
.produkt-bild .ansichten li:last-child{margin-right:auto}
.produkt-text h1{font-size:1.15rem; font-weight:500; margin:0; border:0; padding:0; min-width:0}
.produkt-zeile{margin:.45rem 0 0; font-size:.92rem; color:var(--zweit)}
.produkt-preis{margin:.9rem 0 0; font-size:1.1rem}
.kaufen{display:block; margin:1.2rem 0 .9rem; padding:.95rem 1.2rem; text-align:center;
  background:var(--schrift); color:var(--grund); text-decoration:none; letter-spacing:.06em}
.kaufen[href]:hover{opacity:.85}
.kaufen:not([href]){cursor:default}
.kauf-hinweis{margin:.35rem 0 0; font-size:.82rem; line-height:1.5; color:var(--zweit)}
.kauf-hinweis a, .shop-hinweis a{color:inherit; border-bottom:1px solid var(--linie-zart)}
.kauf-hinweis a:hover, .shop-hinweis a:hover{border-color:currentColor}
.shop-hinweis{margin:3rem 0 0; padding:1.1rem 0 0; border-top:1px solid var(--linie-zart);
  font-size:.85rem; line-height:1.55; color:var(--zweit)}
.shop-hinweis p{margin:0 0 .45rem}
.groessen{display:none; border:0; margin:1.2rem 0 0; padding:0}
.groessen legend{padding:0; margin:0 0 .5rem; font-size:.82rem; color:var(--zweit)}
.groessen input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.groessen label{display:inline-block; min-width:4.6rem; margin:0 .45rem .45rem 0;
  padding:.6rem .9rem; border:1px solid var(--linie-zart); text-align:center; cursor:pointer}
.groessen input:checked + label{border-color:var(--schrift)}
.groessen input:focus-visible + label{outline:2px solid var(--fokus); outline-offset:2px}
.kaufen-waehlen{display:none; background:none; color:var(--zweit); border:1px solid var(--linie-zart)}
@supports selector(:has(*)){
  .groessen{display:block}
  .kaufen-groesse{display:none}
  .kaufen-waehlen{display:block}
  .kauf-bereich:has(.groessen input:checked) .kaufen-waehlen{display:none}
  .kauf-bereich:has(#groesse-1:checked) .kaufen-g1,
  .kauf-bereich:has(#groesse-2:checked) .kaufen-g2{display:block}
}
.vergriffen-hinweis{margin:1.2rem 0 .9rem; padding:.95rem 1.2rem; text-align:center;
  border:1px solid var(--linie); color:var(--zweit); letter-spacing:.06em}
.produkt-beschreibung{margin-top:1.8rem; font-size:.88rem; line-height:1.6}
.produkt-beschreibung p{margin:0 0 .9rem}
.produkt-beschreibung ul{margin:0 0 .9rem; padding-left:1.1rem}
.produkt-beschreibung li{margin:0 0 .3rem}
@media (min-width:700px){ .shop-raster{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:900px){
  .produkt{grid-template-columns:minmax(0,3fr) minmax(0,2fr); column-gap:3rem;
    align-items:start; grid-template-areas:"bild text"}
  .produkt-bild{grid-area:bild}
  .produkt-text{grid-area:text}
}
@media (prefers-reduced-motion:reduce){
  .karte img{transition:none}
  .karte:hover img, .karte:focus-visible img{transform:none}
}
.werk-animation{align-items:center}
.werk-animation .werk-bild{container-type:inline-size}
.werk-animation > .werk-bild{width:min(36rem, 100%); justify-self:center}
@media (min-width:900px){
  .werk-animation > .werk-bild{width:min(36rem, calc(100vw - 30rem))}
}
@media (min-width:801px){
  .werk-animation.hoch{align-content:start; padding-top:max(1.5rem, calc(33vh - 12rem));
    padding-top:max(1.5rem, calc(33svh - 12rem))}
}
@media (min-width:900px){
  .werk-animation.hoch > .werk-bild{align-self:start}
  .werk-animation.hoch > .werk-text{align-self:start; margin-top:calc(34vh + 3.7rem);
    margin-top:calc(34svh + 3.7rem)}
}
@media (min-width:900px){
  .werk-animation.hoch.titel-mitte > .werk-text{margin-top:calc(17vh + .9rem);
    margin-top:calc(17svh + .9rem)}
}
@media (min-width:900px){
  .werk-animation.titel-unten > .werk-text{align-self:start;
    margin-top:calc(67vh - 8.3125rem - clamp(1.5rem,4vw,3rem));
    margin-top:calc(67svh - 8.3125rem - clamp(1.5rem,4vw,3rem))}
}
@media (min-width:900px) and (max-width:939px){
  .werk-animation.hoch{padding-top:max(1.5rem, calc(33vh - 8.1875rem));
    padding-top:max(1.5rem, calc(33svh - 8.1875rem))}
  .werk-animation.titel-unten > .werk-text{margin-top:calc(67vh - 4.5rem - clamp(1.5rem,4vw,3rem));
    margin-top:calc(67svh - 4.5rem - clamp(1.5rem,4vw,3rem))}
}
.wort{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:700;
  font-size:min(17cqw,9rem); line-height:1; letter-spacing:.01em; white-space:nowrap;
  margin:0; text-align:center; cursor:pointer; user-select:none;
  -webkit-user-select:none; position:relative; z-index:70}
.wort span{display:inline-block}
.hinweis-klick{margin:2.2rem 0 0; text-align:center; font-size:.8rem; color:var(--leise);
  opacity:0; visibility:hidden; transition:opacity .8s ease, visibility 0s linear .8s}
.hinweis-klick.da{opacity:1; visibility:visible; transition:opacity .8s ease, visibility 0s}
#buehne{position:fixed; inset:0; z-index:60; overflow:hidden}
#buehne .stueck{position:absolute; will-change:transform; white-space:pre;
  transform-origin:50% 50%}
.fall-rahmen{width:100%; cursor:pointer}
#fall-buehne{display:block; width:100%; height:auto; color:var(--schrift)}
#fall-buehne text, #fall-flug text{font-family:Arial,Helvetica,sans-serif; font-size:72px;
  white-space:pre}
#fall-buehne text:not([fill]), #fall-flug text:not([fill]){fill:currentColor}
#fall-flug{position:fixed; left:0; top:0; z-index:60; pointer-events:none; overflow:visible;
  color:var(--schrift)}
#fall-flug text{pointer-events:auto; cursor:grab}
.zeitleiste-rahmen{width:100%; cursor:pointer}
#zeitleiste-buehne{display:block; width:100%; height:auto; max-height:calc(100vh - 19rem);
  max-height:calc(100svh - 19rem); color:var(--schrift)}
canvas#zeitleiste-buehne{max-height:none; margin-inline:auto;
  width:min(100%, calc((100vh - 19rem) * var(--seite,1))); width:min(100%, calc((100svh - 19rem) * var(--seite,1)))}
.zeitleiste-rahmen:focus:not(:focus-visible), .fall-rahmen:focus:not(:focus-visible){outline:none}
#zeitleiste-flug{position:fixed; left:0; top:0; z-index:60; pointer-events:none; overflow:visible; color:var(--schrift)}
.stoebern-rahmen{width:100%}
.stoebern-rahmen:focus:not(:focus-visible){outline:none}
#stoebern-flug{position:fixed; left:0; top:0; width:100vw; height:100vh; overflow:visible; pointer-events:none; z-index:40;
  color:var(--schrift); fill:currentColor}
html.stoebern-seite, html.stoebern-seite body{touch-action:pinch-zoom; overscroll-behavior:none}
.jonglage-buehne{display:block; width:100%; height:calc(100vh - 19rem); height:calc(100svh - 19rem); min-height:18rem;
  overflow:hidden; color:var(--schrift)}
.jonglage-ohne{font:400 3rem "Helvetica Neue",Helvetica,Arial,sans-serif; letter-spacing:.04em; fill:currentColor;
  visibility:hidden}
#jonglage-flug{position:fixed; left:0; top:0; width:100vw; height:100vh; overflow:visible; pointer-events:none; z-index:30;
  color:var(--schrift)}
#jonglage-baelle{position:fixed; left:0; top:0; z-index:60; pointer-events:none; overflow:visible}
.stoebern-buehne{display:block; width:100%; height:auto; max-height:calc(100vh - 19rem); max-height:calc(100svh - 19rem);
  overflow:hidden; color:var(--schrift); fill:currentColor; touch-action:none}
.jojo-buehne{display:block; width:100%; height:auto; max-height:calc(100vh - 19rem); max-height:calc(100svh - 19rem);
  color:var(--schrift); fill:currentColor}
.hinweis-knopf{display:block; margin:2.2rem auto 0; padding:.4rem .8rem; background:none;
  border:0; font:inherit; font-size:.8rem; color:var(--leise); cursor:pointer}
.hinweis-knopf:hover{color:var(--schrift); text-decoration:underline; text-underline-offset:.2em}
.traenen-wort{display:block; width:min(77cqw,40.5rem); height:auto; overflow:visible;
  color:var(--schrift)}
.traenen-wort path{fill:currentColor}
.traenen-wort .traene{opacity:0; stroke:currentColor; stroke-width:12; stroke-linejoin:round}
#traenen-fest, #traenen-flug{position:fixed; left:0; top:0; z-index:12; pointer-events:none}
.traenen-knopf{position:fixed; left:50%; top:0; margin:0; transform:translateX(-50%);
  z-index:13; background:var(--grund); white-space:nowrap}
.warten-kreis{display:block; width:min(70cqw,36rem); height:auto; overflow:visible; color:var(--schrift)}
.warten-kreis path{fill:currentColor}
.warten-kreis g{animation:warten 1s linear infinite}
@keyframes warten{0%{opacity:1}100%{opacity:.08}}
@media (prefers-reduced-motion:reduce){ .warten-kreis g{animation:none} }
.zahlen-wort{display:block; width:100cqw; height:auto; overflow:visible; fill:currentColor; color:var(--schrift)}
#zahlen-flug{position:fixed; inset:0; z-index:12; pointer-events:none; overflow:hidden; color:var(--schrift)}
#zahlen-flug svg{position:absolute; left:0; top:0; overflow:visible; fill:currentColor; will-change:transform}
.handschrift-wort{display:block; width:min(88cqw, 34rem); height:auto; margin-inline:auto; overflow:visible; color:var(--schrift)}
.handschrift-hand path{fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round}
.handschrift-druck{fill:currentColor; opacity:0}
#handschrift-flug{position:fixed; inset:0; z-index:12; pointer-events:none; overflow:hidden; color:var(--schrift)}
#handschrift-flug svg{position:absolute; left:0; top:0; overflow:visible; fill:currentColor; will-change:transform}
@media (max-width:899px){
  body.titel-fest .werk:not(.hoch){--zone:8.5rem;
    --buehne:calc(100svh - 2.2rem - 1px - max(1.6 * clamp(1rem,4.2vw,1.45rem), 26px) - clamp(1.5rem,4vw,3rem) - 1.25rem
      - 56px - 1.5rem - var(--fuss-hoehe,27px) - var(--zone));
    grid-template-rows:var(--buehne) minmax(var(--zone),auto); row-gap:1.25rem; align-content:start}
  body.titel-fest .werk:not(.hoch) > .werk-bild{height:var(--buehne); min-height:0;
    align-content:center; justify-content:center}
  body.titel-fest .werk:not(.hoch) .werk-bild .ansicht img{
    width:min(var(--natur,100%), 100%, calc(var(--buehne) * var(--seite,1)))}
  body.titel-fest .werk:not(.hoch) .werk-bild:has(.ansichten) .ansicht img{
    width:min(var(--natur,100%), 100%, calc((var(--buehne) - 4.5rem) * var(--seite,1)))}
  body.titel-fest .werk:not(.werk-animation) > .werk-text{align-self:start; justify-self:end; width:100%;
    text-align:right}
  body.titel-fest .werk-animation:not(.hoch) > .werk-text{align-self:start}
  body.titel-fest .werk-animation .stoebern-buehne, body.titel-fest .werk-animation svg#zeitleiste-buehne,
  body.titel-fest .werk-animation #fall-buehne{max-height:calc(var(--buehne) - 4.25rem)}
  body.titel-fest .werk-animation canvas#zeitleiste-buehne{width:min(100%, calc((var(--buehne) - 4.25rem) * var(--seite,1)))}
  body.titel-fest .werk-animation .jonglage-buehne{height:calc(var(--buehne) - 4.25rem); min-height:0}
  body.titel-fest .werk-animation .free-buehne{height:calc(var(--buehne) - 4.25rem); min-height:0}
  body.titel-fest .werk-animation .blume-buehne{height:calc(var(--buehne) - 4.25rem); min-height:0}
  body.titel-fest .werk-animation .haengen-buehne{height:calc(var(--buehne) - 4.25rem); min-height:0}
  body.titel-fest .werk-animation .jojo-buehne, body.titel-fest .werk-animation .warten-kreis{max-height:var(--buehne)}
}
@media (min-width:900px){
  body.titel-fest .werk:not(.werk-animation){grid-template-columns:minmax(0,1fr)
    calc(100vw - clamp(36rem, 36rem + (100vw - 900px) * .334, 50rem)) minmax(0,1fr)}
  body.titel-fest .werk:not(.werk-animation) > .werk-bild{justify-self:center}
  body.titel-fest .werk:not(.hoch) > .werk-text{align-self:start;
    margin-top:calc(67vh - 8.3125rem - clamp(1.5rem,4vw,3rem));
    margin-top:calc(67svh - 8.3125rem - clamp(1.5rem,4vw,3rem))}
}
@media (min-width:900px) and (max-width:939px){
  body.titel-fest .werk:not(.hoch) > .werk-text{margin-top:calc(67vh - 4.5rem - clamp(1.5rem,4vw,3rem));
    margin-top:calc(67svh - 4.5rem - clamp(1.5rem,4vw,3rem))}
}
.sprachfilter{display:flex; gap:1.6rem; margin:-1.1rem 0 1.6rem}
.kein-js .sprachfilter{display:none}
.sprachfilter button{background:none; border:0; border-bottom:1px solid transparent; padding:.15rem 0; font:inherit;
  font-size:.92rem; color:var(--leise); cursor:pointer}
.sprachfilter button[aria-pressed="true"]{color:var(--schrift); border-bottom-color:currentColor}
.titelliste{list-style:none; margin:0; padding:0; max-width:940px; border-top:1px solid var(--linie-zart)}
.titelliste li{border-bottom:1px solid var(--linie-zart)}
.titelliste a{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1.5rem;
  min-height:4.9rem; color:var(--schrift); border-bottom:0; text-decoration:none}
.titelliste .titel{font-size:1.45rem; line-height:1.25; padding:.8rem 0}
.titelliste .leise{display:flex; align-items:center; justify-content:flex-end; color:var(--leise); opacity:.55;
  font-size:1.2rem; line-height:1; white-space:nowrap; transition:opacity .25s, color .25s}
.titelliste a:hover .leise, .titelliste a:focus-visible .leise{opacity:1; color:var(--schrift)}
.titelliste a:hover .titel{text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px}
.wort-leise{font-family:"Helvetica Neue",Inter,Helvetica,Arial,sans-serif}
.wort-leise.times{font-family:Times,"Times New Roman",serif}
.wort-leise.arial{font-family:Arial,Helvetica,sans-serif}
.wort-leise.fett{font-weight:700}
.wort-leise.mittel{font-weight:500; letter-spacing:.04em; font-size:.85em}
.wort-leise.medium{font-weight:500}
.titelliste .warten-kreis{display:block; height:3.4rem; width:auto; fill:currentColor}
.titelliste .warten-kreis g{animation:none !important}
@media (max-width:600px){
  .sprachfilter{gap:1.2rem; margin:-.9rem 0 1.2rem}
  .titelliste a{min-height:3.7rem; gap:.9rem}
  .titelliste .titel{font-size:1.06rem; padding:.6rem 0}
  .titelliste .leise{font-size:.78rem}
  .titelliste .warten-kreis{height:2.4rem}
}
html.licht-dunkel{--grund:#000; --schrift:#f4f4f4; --zweit:#b4b4b4; --leise:#8a8a8a; --linie:#4a4a4a; --fuss-rand:#4a4a4a;
  --linie-zart:#262626; --fokus:#7aa2ff; color-scheme:dark}
html.licht-hell{--grund:#fff; --schrift:#181818; --zweit:#4a4a4a; --leise:#8c8c8c; --linie:#181818; --fuss-rand:#181818;
  --linie-zart:#e2e2e2; --fokus:#0057ff; color-scheme:light}
.licht-buehne{display:block; width:min(21rem, 62%); height:auto; margin:0 auto; overflow:visible; color:var(--schrift);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; outline:none}
.licht-buehne:focus-visible{outline:2px solid var(--fokus); outline-offset:.6rem}
html.licht-dunkel .licht-schrift{filter:url(#licht-schein)}
html.licht-dunkel .licht-traurig, html.licht-hell .licht-froh{display:none}
.zeit-wort{display:block; width:min(21rem, 62%); height:auto; margin-inline:auto; overflow:visible; color:var(--schrift)}
.zeit-fuellung{fill:currentColor}
.zeit-umriss{fill:none; stroke:currentColor; stroke-width:1.5px; stroke-linejoin:round}
#zeit-farbe{position:fixed; left:0; top:0; width:100%; height:100%; z-index:12; pointer-events:none; color:var(--schrift)}
#zeit-stufe{position:fixed; left:0; top:0; width:0; height:0; z-index:16; pointer-events:none; color:var(--schrift)}
.zeit-knopf{position:fixed; left:50%; top:0; margin:0; transform:translateX(-50%); z-index:17;
  background:var(--grund); white-space:nowrap}
.zeiger-wort{--zeiger-breite:min(22rem, 66%); display:block; width:var(--zeiger-breite); height:auto; overflow:visible;
  margin:calc(var(--zeiger-breite) * var(--zeiger-rand, 0) * -1) auto; color:var(--schrift)}
#zeiger-flaeche{position:fixed; left:0; top:0; width:100%; height:100%; z-index:12; pointer-events:none;
  background:#fff; mix-blend-mode:difference; clip-path:polygon(0 0,0 0,0 0)}
html.zeiger{--schrift:#000}
@media (prefers-color-scheme:dark){
  html.zeiger{--grund:#000; --schrift:#fff}
}
html.zeiger .werk-bild{container-type:normal}
html.zeiger .zeiger-wort{position:relative; z-index:13}
.zeiger-umgekehrt, .zeiger-schrift{fill:var(--schrift)}
.zeiger-wort.laeuft .zeiger-umgekehrt{fill:var(--grund)}
.zeiger-steg{fill:var(--schrift)}
.spule-buehne{display:block; width:min(100%, calc(100vh - 19rem)); width:min(100%, calc(100svh - 19rem)); aspect-ratio:1;
  margin-inline:auto; color:var(--schrift)}
#spule-leinwand{position:fixed; left:0; top:0; width:100vw; height:100vh; z-index:12; pointer-events:none}
@media (max-width:899px){
  body.titel-fest .spule-buehne{width:min(100%, calc(var(--buehne) - 4.25rem))}
}
@media (min-width:900px){
  .werk-animation > .werk-bild:has(.spule-buehne){align-self:start}
}
.free-buehne{display:flex; flex-direction:column; justify-content:flex-end; height:calc(100vh - 19rem);
  height:calc(100svh - 19rem); min-height:18rem}
.free-wort{display:block; width:min(80cqw, 30rem); height:auto; margin-inline:auto; overflow:visible; color:var(--schrift)}
.free-wort path{fill:none; stroke:currentColor; stroke-width:1.5px; vector-effect:non-scaling-stroke; stroke-linejoin:round}
.free-wort.free-laeuft{visibility:hidden}
#free-leinwand{position:fixed; left:0; top:0; width:100vw; height:100vh; z-index:12; pointer-events:none}
.blume-buehne{display:flex; align-items:center; justify-content:center; padding:1.25rem 0;
  height:calc(100vh - 19rem); height:calc(100svh - 19rem); min-height:18rem}
.blume{display:block; width:min(92cqw, 30rem); max-width:100%; max-height:100%; height:auto; overflow:visible}
.blatt .streifen{fill:#fff; stroke:#181818; stroke-width:1px; vector-effect:non-scaling-stroke}
@media (max-width:560px){
  .blatt .streifen{stroke-width:.75px}
}
.blatt text{fill:#181818; font-family:inherit; white-space:pre}
.blume-knopf{position:fixed; left:50%; top:0; margin:0; transform:translateX(-50%); z-index:17;
  background:var(--grund); white-space:nowrap}
#blume-flug{position:fixed; left:0; top:0; z-index:12; pointer-events:none; overflow:visible;
  font-family:"Helvetica Neue", Inter, Helvetica, Arial, sans-serif}
.haengen-buehne{display:flex; align-items:center; justify-content:center;
  height:calc(100vh - 19rem); height:calc(100svh - 19rem); min-height:18rem}
.haengen-wort{display:block; width:100%; max-width:100%; max-height:100%; height:auto; overflow:visible;
  color:var(--schrift)}
.haengen-wort path{fill:currentColor}
.haengen-wort .haengen-schnur{fill:none; stroke:currentColor; stroke-width:1.1px; vector-effect:non-scaling-stroke;
  opacity:.5}
.haengen-wort .haengen-nagel{fill:currentColor; opacity:.5}
.haengen-wort{visibility:hidden}
.haengen-wort.haengen-laeuft{visibility:hidden}
#haengen-leinwand{position:fixed; left:0; top:0; width:100vw; height:100vh; z-index:12; pointer-events:none}
html.haengen-seite .werk, html.haengen-seite .werk-text{-webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none; -webkit-user-drag:none}
.kooperation{margin:3.5rem 0 0}
.kooperation p{max-width:34rem}
.koop-reihen{display:flex; flex-wrap:wrap; gap:1.2rem 2.4rem; margin-top:1.4rem}
.koop-schau{flex:0 1 auto}
.koop-buehne{display:grid; justify-items:start}
.koop-folie{grid-area:1 / 1; margin:0; opacity:0; transition:opacity .7s ease}
.koop-folie.sichtbar{opacity:1}
.koop-folie img{display:block; width:auto; max-width:22rem; max-height:17rem; height:auto}
.koop-punkte{display:flex; gap:.55rem; margin-top:.8rem}
.kooperation .koop-nachweis{margin:1.8rem 0 0; font-size:.8rem; color:var(--leise)}
.koop-punkte button{width:22px; height:22px; padding:0; background:none; border:0; cursor:pointer;
  position:relative}
.koop-punkte button::before{content:""; position:absolute; inset:8px; border-radius:50%;
  border:1px solid var(--schrift)}
.koop-punkte button[aria-current]::before{background:var(--schrift)}
@media (prefers-reduced-motion:reduce){ .koop-folie{transition:none} }
body.kein-js .koop-buehne{display:block}
body.kein-js .koop-folie{opacity:1; margin-bottom:1rem}
body.kein-js .koop-punkte{display:none}
@media (max-width:560px){ .koop-folie img{max-height:22rem} }
.ladebalken{position:fixed; left:0; top:0; height:2px; width:0; z-index:100; background:var(--schrift);
  opacity:.85; transition:width 10s cubic-bezier(.06,.7,.3,1)}
.ladebalken.laeuft{width:92%}
.anfrage{margin:.35rem 0 0; font-size:.82rem; color:var(--leise); max-width:22rem}
.shop-zustand{margin:0 0 1.1rem; padding:.65rem .9rem; max-width:44rem; font-size:.9rem;
  color:var(--schrift); border:1px solid var(--linie); border-radius:2px}
.shop-zustand a{color:var(--schrift)}
.animationsspalten{display:grid; grid-template-columns:1fr 1fr; gap:0 3.6rem; max-width:1100px}
.animationsspalte h2{font-size:.78rem; font-weight:400; letter-spacing:.1em; color:var(--leise);
  margin:0 0 .2rem; text-transform:lowercase}
.animationsliste{list-style:none; margin:0; padding:0; border-top:1px solid var(--linie-zart)}
.animationsliste li{border-bottom:1px solid var(--linie-zart)}
.animationsliste a{display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
  padding:.5rem 0; color:var(--schrift); border-bottom:0; text-decoration:none}
.animationsliste .titel{font-size:1.08rem; font-weight:300; line-height:1.3}
.animationsliste .schau{flex:0 0 auto; width:64px; height:64px; display:block; line-height:0;
  opacity:.5; filter:grayscale(.78);
  transition:opacity .35s ease, filter .35s ease, transform .35s ease}
.animationsliste img{width:100%; height:100%; display:block}
.animationsliste a:hover .schau, .animationsliste a:focus-visible .schau{
  opacity:1; filter:grayscale(0); transform:scale(1.06)}
.animationsliste a:hover .titel, .animationsliste a:focus-visible .titel{
  text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px}
@media (prefers-reduced-motion:reduce){ .animationsliste .schau{transition:none} }
@media (max-width:760px){
  .animationsspalten{grid-template-columns:1fr; gap:0}
  .animationsspalte + .animationsspalte h2{margin-top:2.2rem}
}
.animationsraster{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4rem 2.6rem; list-style:none;
  margin:0; padding:0; max-width:1200px}
.animationsraster figure{margin:0; padding:0 10%}
.animationsraster a{display:block; color:var(--schrift); text-decoration:none; border-bottom:0}
.animationsraster .rahmen{display:block; overflow:hidden; line-height:0}
.animationsraster img{width:100%; height:auto; display:block;
  transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.animationsraster a:hover img, .animationsraster a:focus-visible img{transform:scale(1.05)}
.animationsraster figcaption{margin-top:.6rem; font-size:.8rem; line-height:1.3; color:var(--schrift)}
.animationsraster a:hover figcaption{text-decoration:underline; text-underline-offset:.2em;
  text-decoration-thickness:1px}
@media (prefers-reduced-motion:reduce){
  .animationsraster img{transition:none}
  .animationsraster a:hover img, .animationsraster a:focus-visible img{transform:none}
}
@media (max-width:1180px){ .animationsraster{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (max-width:940px){ .animationsraster{grid-template-columns:repeat(4,minmax(0,1fr)); gap:3.4rem 2.2rem} }
@media (max-width:760px){ .animationsraster{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){
  .animationsraster{grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1.6rem}
  .animationsraster figure{padding:0 7%}
}
main.animationen{max-width:calc(1240px + 2 * var(--rand))}
main.animationen:has(.animationsspalten){max-width:calc(1100px + 2 * var(--rand))}