/* Schriften liegen auf dem eigenen Server (Jost, Archivo; SIL Open Font License 1.1) – keine Verbindung zu Google */
  @font-face{font-family:"Jost";font-style:normal;font-weight:200;font-display:swap;src:url(/assets/fonts/jost-200.woff2) format("woff2");}
  @font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jost-400.woff2) format("woff2");}
  @font-face{font-family:"Jost";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/jost-800.woff2) format("woff2");}
  @font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/archivo-400.woff2) format("woff2");}
  @font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/archivo-600.woff2) format("woff2");}
  @font-face{font-family:"Archivo";font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/archivo-900.woff2) format("woff2");}

  :root{
    --black:#000000;
    --white:#ffffff;
    --red:#E4082B;
    --red-hi:#FF5C6E;
    --red-low:#7A0316;
    --grey:#8A8A8A;
  }

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

  html{scroll-behavior:smooth;}

  html,body{height:100%;}

  body{
    background:var(--black);
    color:var(--white);
    font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
  }

  /* ---------- ZWEI BEREICHE NEBENEINANDER ---------- */
  /* Start (Hero, Räume, Videos, Footer) | Blog & Bewertungen */
  .track{
    position:fixed;
    inset:0;
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .track::-webkit-scrollbar{display:none;}
  /* Mit JavaScript: erst anzeigen, wenn die Startseite in der Mitte steht (Notfall: nach 1,2 s trotzdem) */
  .js .track:not(.ready){opacity:0;animation:reveal 0s 1.2s forwards;}
  @keyframes reveal{to{opacity:1;}}
  /* Startseite weiter unten (Räume, Videos): kein seitliches Wischen zum Blog */
  .track.lock-x{overflow-x:hidden;}

  .pane{
    flex:0 0 100%;
    min-width:0;
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    scroll-behavior:smooth;
    scrollbar-width:thin;
    scrollbar-color:#333 transparent;
  }
  .pane:focus{outline:none;}
  .sr-only{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:12vh 6vw 10vh;
    text-align:center;
  }

  .wordmark{
    font-family:"Jost","Futura","Century Gothic",sans-serif;
    text-transform:uppercase;
    font-size:clamp(1.9rem,8.2vw,6.5rem);
    line-height:1.05;
    letter-spacing:0.04em;
    color:var(--white);
    animation:heartbeat 2.4s ease-in-out infinite;
    will-change:filter;
  }
  .wordmark .w-kunst{font-weight:200;letter-spacing:0.09em;}
  .wordmark .w-block{font-weight:800;letter-spacing:0.01em;}
  .wordmark .w-balve{font-weight:400;letter-spacing:0.05em;}

  /* Puls wie ein Herzschlag: zwei Schläge, dann Pause */
  @keyframes heartbeat{
    0%   {filter:blur(0px);}
    8%   {filter:blur(2.4px);}
    16%  {filter:blur(0px);}
    24%  {filter:blur(1.8px);}
    34%  {filter:blur(0px);}
    100% {filter:blur(0px);}
  }

  .contact{
    margin-top:clamp(1.8rem,5vw,3rem);
    font-size:clamp(0.95rem,2.1vw,1.35rem);
    letter-spacing:0.16em;
    text-transform:uppercase;
    font-weight:600;
    line-height:2;
  }
  .contact a{text-decoration:none;}

  /* roter Schimmer */
  .shimmer{
    background:linear-gradient(100deg,
      var(--red-low) 0%,
      var(--red) 30%,
      var(--red-hi) 48%,
      var(--red) 66%,
      var(--red-low) 100%);
    background-size:300% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:shimmer 7s linear infinite;
  }
  @keyframes shimmer{
    from{background-position:150% 0;}
    to{background-position:-150% 0;}
  }

  /* ---------- GEISTERBUTTON ---------- */
  .ghost{
    display:inline-block;
    margin-top:clamp(2.2rem,6vw,3.5rem);
    padding:1.05rem 3.2rem;
    border:1px solid var(--red);
    color:var(--red);
    background:transparent;
    font-family:inherit;
    font-weight:900;
    font-size:clamp(0.78rem,1.5vw,0.95rem);
    letter-spacing:0.28em;
    text-transform:uppercase;
    text-decoration:none;
    cursor:pointer;
    transition:background-color .25s ease,color .25s ease;
    animation:heartbeat 2.4s ease-in-out infinite;
    will-change:filter;
  }
  .ghost:hover,
  .ghost:focus-visible{
    background:var(--red);
    color:var(--black);
  }
  .ghost:focus-visible{outline:2px solid var(--white);outline-offset:4px;}

  .brochure-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
    margin-top:clamp(2.2rem,6vw,3.5rem);
  }

  .brochure-buttons .ghost{
    margin-top:0;
  }

  /* ---------- VIDEOS ---------- */
  .videos{
    padding:clamp(4rem,10vw,8rem) 6vw;
    max-width:1400px;
    margin:0 auto;
  }

  .videos-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2rem;
  }

  .video-card h2{
    margin-bottom:1rem;
    font-size:1rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.2em;
  }

  .video-wrap{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#0a0a0a;
  }

  .video-wrap iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
  }

  /* Zwei-Klick-Lösung: YouTube wird erst nach Klick geladen */
  .video-consent{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1.1rem;
    padding:1.5rem;
    text-align:center;
    border:1px solid #1f1f1f;
  }
  .video-consent p{
    max-width:48ch;
    font-size:0.8rem;
    line-height:1.7;
    color:var(--grey);
  }
  .video-consent .ghost{margin-top:0;}
  .video-alt{
    font-size:0.7rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--grey);
    text-decoration:underline;
    text-underline-offset:0.35em;
  }
  .video-alt:hover,
  .video-alt:focus-visible{color:var(--white);}
  .video-alt:focus-visible{outline:2px solid var(--white);outline-offset:4px;}

  .scroll-hint{
    margin-top:auto;
    padding-top:4rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.9rem;
    font-size:0.7rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--grey);
    text-decoration:none;
  }
  .scroll-hint:hover{color:var(--white);}
  .scroll-hint:focus-visible{outline:2px solid var(--white);outline-offset:6px;}

  .scroll-arrow{
    width:2.2rem;
    height:2.2rem;
    color:var(--red);
    transition:transform .25s ease,color .25s ease;
  }
  .scroll-hint:hover .scroll-arrow,
  .scroll-hint:focus-visible .scroll-arrow{
    color:var(--white);
    transform:translateY(5px);
  }

  /* Pfeil nach rechts: am rechten Rand, etwas unterhalb der Mitte */
  .mid-hint{
    position:absolute;
    top:62%;
    right:clamp(0.75rem,3vw,2.5rem);
    transform:translateY(-50%);
    width:9.5rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.9rem;
    text-align:center;
    font-size:0.7rem;
    line-height:1.7;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--grey);
    text-decoration:none;
  }
  .mid-hint-left{right:auto;left:clamp(0.75rem,3vw,2.5rem);}
  .mid-hint-left .arrow-wrap{--dir:-1;}
  .mid-hint:hover{color:var(--white);}
  .mid-hint:focus-visible{outline:2px solid var(--white);outline-offset:6px;}
  .mid-hint:hover .scroll-arrow,
  .mid-hint:focus-visible .scroll-arrow{
    color:var(--white);
    transform:translateX(6px);
  }
  .mid-hint.mid-hint-left:hover .scroll-arrow,
  .mid-hint.mid-hint-left:focus-visible .scroll-arrow{transform:translateX(-6px);}

  /* Wisch-Hinweis: Geisterpfeile tauchen langsam hinter dem Pfeil auf, gleiten hinein und verblassen */
  .arrow-wrap{
    --dir:1;
    position:relative;
    display:inline-flex;
    flex:none;
  }
  .back-hint .arrow-wrap{--dir:-1;}
  .sub-bar .arrow-wrap{--travel:0.9rem;}
  .arrow-wrap .scroll-arrow{position:relative;z-index:1;}
  .arrow-wrap .trail{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    color:var(--red);
    opacity:0;
    pointer-events:none;
    animation:swipe-trail 4.2s ease-in-out infinite;
  }
  .arrow-wrap .trail + .trail{animation-delay:.55s;}
  @keyframes swipe-trail{
    0%   {opacity:0;   transform:translateX(calc(var(--dir) * var(--travel,2.1rem) * -1));}
    22%  {opacity:.6;}
    58%  {opacity:.25; transform:translateX(calc(var(--dir) * var(--travel,2.1rem) * -0.33));}
    72%  {opacity:0;   transform:translateX(0);}
    100% {opacity:0;   transform:translateX(0);}
  }
  /* Pfeil nach unten: Geisterpfeile kommen von oben */
  .scroll-hint .arrow-wrap .trail{animation-name:swipe-trail-down;}
  @keyframes swipe-trail-down{
    0%   {opacity:0;   transform:translateY(-1.9rem);}
    22%  {opacity:.6;}
    58%  {opacity:.25; transform:translateY(-0.6rem);}
    72%  {opacity:0;   transform:translateY(0);}
    100% {opacity:0;   transform:translateY(0);}
  }
  .swipe-text{display:none;}
  @media (hover:none) and (pointer:coarse){
    .swipe-text{display:block;color:var(--white);}
  }

  /* ---------- BILDER ---------- */
  .gallery{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:2px;
  }
  .gallery figure{
    position:relative;
    margin:0;
    overflow:hidden;
    background:#0a0a0a;
  }
  .gallery img{
    display:block;
    width:100%;
    height:100%;
    aspect-ratio:3/2;
    object-fit:cover;
  }
  .gallery figcaption{
    position:absolute;
    left:1.25rem;
    bottom:1.1rem;
    font-size:0.68rem;
    font-weight:900;
    letter-spacing:0.26em;
    text-transform:uppercase;
    color:var(--white);
    mix-blend-mode:difference;
  }
  .gallery .wide{grid-column:1 / -1;}
  .gallery .wide.plan{padding:clamp(1.25rem,4vw,3rem);}
  .gallery .wide.plan img{
    height:auto;
    max-height:85svh;
    aspect-ratio:auto;
    object-fit:contain;
  }
  .gallery .plan figcaption{
    position:static;
    margin-top:1.25rem;
  }
  .gallery .wide img{aspect-ratio:21/9;}

  /* ---------- RÄUME / FAKTEN ---------- */
  .facts{
    padding:clamp(4rem,10vw,8rem) 6vw;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:2.5rem 3rem;
    max-width:1200px;
    margin:0 auto;
  }
  .facts div{border-top:1px solid #1f1f1f;padding-top:1rem;}
  .facts h2{
    font-size:1rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.2em;
    margin-bottom:0.5rem;
  }
  .facts p{color:var(--grey);font-size:0.95rem;line-height:1.7;}

  /* ---------- UNTERSEITEN: BLOGEINTRÄGE | BEWERTUNGEN ---------- */
  /* Überschriften und Pfeile rot, Beschreibungen und Texte weiß */
  .pane-sub{display:flex;flex-direction:column;}
  .pane-sub > *{flex:none;}
  .pane-sub > .sub-body{flex:1 0 auto;width:100%;}

  .sub-bar{
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1.5rem;
    padding:1.3rem 6vw;
    background:var(--black);
    border-bottom:1px solid #1f1f1f;
  }
  .back-hint,
  .next-hint{
    display:inline-flex;
    align-items:center;
    gap:0.9rem;
    font-size:0.7rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--white);
    text-decoration:none;
  }
  .next-hint{margin-left:auto;}
  .back-hint .scroll-arrow,
  .next-hint .scroll-arrow{
    width:1.8rem;
    height:1.8rem;
    flex:none;
  }
  .back-hint:hover .scroll-arrow,
  .back-hint:focus-visible .scroll-arrow{
    color:var(--white);
    transform:translateX(-5px);
  }
  .next-hint:hover .scroll-arrow,
  .next-hint:focus-visible .scroll-arrow{
    color:var(--white);
    transform:translateX(5px);
  }
  .back-hint:focus-visible,
  .next-hint:focus-visible{outline:2px solid var(--white);outline-offset:6px;}

  .sub-body{
    max-width:52rem;
    margin:0 auto;
    padding:clamp(3rem,8vw,6rem) 6vw clamp(2rem,5vw,4rem);
  }
  .sub-body-wide{max-width:76rem;}

  /* ---------- BLOGEINTRÄGE: faltbare Beiträge ---------- */
  .beitraege{
    --numw:3.6rem;
    --gap:1.2rem;
    border-bottom:1px solid #1f1f1f;
  }
  .beitrag,
  .group-head{border-top:1px solid #1f1f1f;}
  .beitrag summary{
    display:grid;
    grid-template-columns:var(--numw) minmax(0,1fr) 1.6rem;
    column-gap:var(--gap);
    align-items:start;
    padding:1.5rem 0;
    cursor:pointer;
    list-style:none;
  }
  .beitrag summary::-webkit-details-marker{display:none;}
  .beitrag summary:focus-visible{outline:2px solid var(--white);outline-offset:4px;}
  .beitrag-num{
    font-size:1.15rem;
    font-weight:900;
    line-height:1.3;
    letter-spacing:0.04em;
    color:var(--red);
  }
  .beitrag-label{
    display:block;
    margin-bottom:0.45rem;
    font-size:0.7rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--white);
  }
  .beitrag summary .beitrag-title{
    display:block;
    margin:0;
    text-transform:none;
    font-size:clamp(1.05rem,2.3vw,1.4rem);
    font-weight:900;
    line-height:1.35;
    letter-spacing:0.04em;
    color:var(--red);
  }
  .beitrag-chevron{
    width:1.6rem;
    height:1.6rem;
    margin-top:0.1rem;
    color:var(--red);
    transition:transform .25s ease;
  }
  .beitrag[open] .beitrag-chevron{transform:rotate(180deg);}
  .beitrag summary:hover .beitrag-chevron{transform:translateY(3px);}
  .beitrag[open] summary:hover .beitrag-chevron{transform:rotate(180deg) translateY(3px);}

  /* Kapitel 2: Überschrift und die vier Raum-Portraits eingerückt darunter */
  .beitraege .group-head{
    display:grid;
    grid-template-columns:var(--numw) minmax(0,1fr);
    column-gap:var(--gap);
    align-items:baseline;
    margin:0;
    padding:1.5rem 0 0.5rem;
  }
  .group-title{
    font-size:1.05rem;
    font-weight:900;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--red);
  }
  .beitrag-group .beitrag{margin-left:calc(var(--numw) + var(--gap));}
  .beitrag-group .beitrag:first-of-type{border-top:0;}
  .beitrag-group .beitrag:first-of-type summary{padding-top:0.9rem;}

  .beitrag{scroll-margin-top:5.4rem;}
  .beitrag-body{padding:0.2rem 0 2.6rem calc(var(--numw) + var(--gap));}
  .beitrag-group .beitrag-body{padding-left:0;}
  .beitrag[open] .beitrag-body{animation:fade-in .5s ease both;}
  .beitrag-body p{
    max-width:62ch;
    font-size:1rem;
    line-height:1.8;
    color:var(--white);
  }
  .beitrag-body p + p{margin-top:1rem;}
  .beitrag-fig{margin:0;}
  .beitrag-fig img{
    display:block;
    width:100%;
    height:auto;
    background:#0a0a0a;
  }
  .layout-split{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:2rem 2.6rem;
    align-items:start;
  }
  .layout-split.img-left .beitrag-fig{order:-1;}
  .layout-top .beitrag-fig{margin-bottom:1.9rem;}
  .layout-bottom .beitrag-fig{margin-top:1.9rem;}
  .layout-top .beitrag-fig img,
  .layout-bottom .beitrag-fig img{max-height:62vh;object-fit:cover;}
  .layout-mixed .beitrag-lead{margin-bottom:1.9rem;}
  .layout-mixed .beitrag-row{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:2rem 2.6rem;
    align-items:start;
  }
  @media (min-width:1000px){
    .layout-top.cols .beitrag-text{column-count:2;column-gap:3rem;}
    .layout-top.cols .beitrag-text p{max-width:none;break-inside:avoid-column;}
  }
  @media (max-width:760px){
    .beitraege{--numw:2.7rem;--gap:0.8rem;}
    .beitrag summary{padding:1.25rem 0;}
    .beitrag-group .beitrag{margin-left:0;}
    .beitrag-body{padding-left:0;}
    .layout-split{display:flex;flex-direction:column;gap:0;}
    .layout-split .beitrag-fig{order:-1;margin:0 0 1.5rem;}
    .layout-mixed .beitrag-row{display:block;}
    .layout-mixed .beitrag-fig{margin:0 0 1.5rem;}
    .layout-bottom{display:flex;flex-direction:column;}
    .layout-bottom .beitrag-fig{order:-1;margin:0 0 1.5rem;}
  }
  .pics{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));
    gap:2.4rem 1.6rem;
  }
  .pics .empty{grid-column:1 / -1;}
  .pic{margin:0;}
  .pic img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:3/2;
    object-fit:cover;
    background:#0a0a0a;
  }
  .sub-body .intro{
    max-width:62ch;
    margin:-0.8rem 0 clamp(2rem,5vw,3rem);
    font-size:1rem;
    line-height:1.8;
    color:var(--white);
  }
  .pics.natural{align-items:start;}
  .pics.natural .pic img{aspect-ratio:auto;height:auto;object-fit:contain;}
  .pic figcaption{
    margin-top:0.9rem;
    font-size:0.95rem;
    line-height:1.7;
    color:var(--white);
  }
  .pic figcaption b{
    display:block;
    margin-bottom:0.25rem;
    font-size:0.8rem;
    font-weight:900;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--red);
  }
  .sub-body h1{
    margin-bottom:clamp(2rem,5vw,3.5rem);
    font-size:clamp(1.5rem,4.2vw,2.5rem);
    font-weight:900;
    line-height:1.2;
    text-transform:uppercase;
    letter-spacing:0.2em;
    color:var(--red);
  }

  .review{
    margin:0;
    padding:1.4rem 0 2.6rem;
    border-top:1px solid #1f1f1f;
  }
  .review p,
  .empty{
    max-width:62ch;
    font-size:1rem;
    line-height:1.8;
    color:var(--white);
  }
  .review blockquote{margin:0;}
  .review-title{
    margin:0 0 0.8rem;
    font-size:1.05rem;
    font-weight:900;
    line-height:1.4;
    letter-spacing:0.06em;
    color:var(--red);
  }
  .review-group{
    margin:clamp(2.4rem,6vw,3.6rem) 0 1.4rem;
    font-size:1rem;
    font-weight:900;
    line-height:1.3;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--red);
  }
  #review-list:empty{display:none;}
  .review figcaption{
    margin-top:1rem;
    font-size:0.72rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--white);
  }
  .empty{
    padding-top:1.4rem;
    border-top:1px solid #1f1f1f;
  }
  .sub-body h2{
    margin-bottom:1.6rem;
    font-size:1.2rem;
    font-weight:900;
    line-height:1.3;
    text-transform:uppercase;
    letter-spacing:0.14em;
    color:var(--red);
  }

  /* Sterne in der Liste: gefüllte Sterne rot, übrige dunkelgrau */
  .stars{
    margin-bottom:0.8rem;
    font-size:1.3rem;
    line-height:1;
    letter-spacing:0.12em;
    color:#3a3a3a;
  }
  .stars b{font-weight:400;color:var(--red);}

  /* Bewertung schreiben */
  .review-form{margin-bottom:clamp(3rem,7vw,5rem);}
  .field{
    min-width:0;
    margin:0 0 1.6rem;
    padding:0;
    border:0;
  }
  .field > label,
  .field > legend{
    display:block;
    margin-bottom:0.6rem;
    padding:0;
    font-size:0.72rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--white);
  }
  .field input[type="text"],
  .field input[type="email"],
  .field textarea{
    display:block;
    width:100%;
    padding:0.9rem 1rem;
    border:1px solid #3a3a3a;
    border-radius:0;
    background:transparent;
    color:var(--white);
    font:inherit;
    font-size:1rem;
    line-height:1.6;
  }
  .field textarea{min-height:9rem;resize:vertical;}
  .field input[type="text"]:focus,
  .field input[type="email"]:focus,
  .field textarea:focus{
    outline:1px solid var(--red);
    border-color:var(--red);
  }
  .field ::placeholder{color:var(--grey);opacity:1;}

  .field .star-input{
    display:inline-flex;
    flex-direction:row-reverse;
    justify-content:flex-end;
    gap:0.1rem;
  }
  .star-input input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
  }
  .field .star-input label{
    margin:0;
    padding:0.1rem 0.2rem;
    font-size:2.2rem;
    line-height:1;
    letter-spacing:0;
    color:#3a3a3a;
    cursor:pointer;
    transition:color .15s ease;
  }
  .field .star-input label:hover,
  .field .star-input label:hover ~ label,
  .field .star-input input:checked ~ label{color:var(--red);}
  .star-input input:focus-visible + label{outline:2px solid var(--white);outline-offset:2px;}

  .field .check{
    display:flex;
    align-items:flex-start;
    gap:0.8rem;
    font-size:0.9rem;
    line-height:1.6;
    letter-spacing:0.02em;
    text-transform:none;
    cursor:pointer;
  }
  .check input{
    flex:none;
    width:1.1rem;
    height:1.1rem;
    margin-top:0.2rem;
    accent-color:var(--red);
  }
  .review-form .ghost{margin-top:0.4rem;animation:none;}
  .ghost:disabled,
  .ghost:disabled:hover{
    border-color:#3a3a3a;
    background:transparent;
    color:#6b6b6b;
    cursor:not-allowed;
  }
  .form-note,
  .form-status{
    margin-top:1.2rem;
    max-width:62ch;
    font-size:0.9rem;
    line-height:1.7;
    color:var(--white);
  }
  .form-status a,
  .form-note a{color:inherit;text-underline-offset:0.25em;}
  .form-status a:hover,
  .form-note a:hover{color:var(--red);}

  .hp{
    position:absolute;
    left:-10000px;
    width:1px;
    height:1px;
    overflow:hidden;
  }
  .rating-sum{
    margin:-0.6rem 0 1.8rem;
    font-size:1rem;
    line-height:1.7;
    color:var(--white);
  }
  .review p{white-space:pre-line;}


  /* ---------- FOOTER ---------- */
  footer{
    padding:clamp(3rem,8vw,6rem) 6vw clamp(3rem,6vw,5rem);
    text-align:center;
    border-top:1px solid #1f1f1f;
  }
  footer .adr{
    font-style:normal;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.2em;
    font-size:clamp(0.8rem,1.8vw,1rem);
    line-height:2.1;
  }
  footer .adr a{color:inherit;text-decoration:none;}
  footer .adr a:hover{color:var(--red);}
  .legal{
    margin-top:2rem;
    font-size:0.75rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
  }
  .legal summary{
    display:inline-block;
    cursor:pointer;
    list-style:none;
    color:var(--grey);
  }
  .legal summary::-webkit-details-marker{display:none;}
  .legal summary:hover,
  .legal summary:focus-visible{color:var(--white);}
  .legal summary:focus-visible{outline:2px solid var(--white);outline-offset:4px;}
  .legal-body{
    margin-top:1.5rem;
    font-style:normal;
    font-size:0.85rem;
    letter-spacing:0.06em;
    line-height:1.9;
    text-transform:none;
    color:#d8d8d8;
  }
  .legal-body a{color:inherit;text-underline-offset:0.25em;}
  .legal-body a:hover{color:var(--red);}
  .legal + .legal{margin-top:1.2rem;}
  .privacy-text{
    max-width:46rem;
    margin:1.5rem auto 0;
    text-align:left;
  }
  .privacy-text h3{
    margin:1.8rem 0 0.5rem;
    font-size:0.85rem;
    font-weight:900;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--red);
  }
  .privacy-text p{color:#fff;}

  /* ---------- DATENSCHUTZ-POPUP (einmal pro Sitzung) ---------- */
  .privacy{
    width:min(34rem,calc(100vw - 2rem));
    max-height:calc(100svh - 2rem);
    margin:auto;
    padding:clamp(1.5rem,4vw,2.4rem);
    overflow:auto;
    border:1px solid var(--red);
    background:var(--black);
    color:var(--white);
  }
  .privacy::backdrop{background:rgba(0,0,0,0.85);}
  .privacy[open]{animation:fade-in .7s ease both;}
  .privacy[open]::backdrop{animation:fade-in .7s ease both;}
  @keyframes fade-in{from{opacity:0;}to{opacity:1;}}
  .privacy h2{
    margin-bottom:1rem;
    font-size:1.2rem;
    font-weight:900;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--red);
  }
  .privacy h2:focus{outline:none;}
  .privacy p{font-size:0.95rem;line-height:1.75;color:var(--white);}
  .privacy p + p{margin-top:0.8rem;}
  .privacy-actions{
    margin-top:1.6rem;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:1.2rem 2rem;
  }
  .privacy .ghost{margin-top:0;padding:0.9rem 2.2rem;animation:none;}
  .privacy a{
    font-size:0.8rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--white);
    text-underline-offset:0.35em;
  }
  .privacy a:hover{color:var(--red);}
  .privacy a:focus-visible{outline:2px solid var(--white);outline-offset:4px;}

  /* Kontakt: Button ganz unten im Footer und Formular-Fenster */
  footer .contact-open{margin:0 0 clamp(2.4rem,6vw,3.6rem);}
  .contact-dialog{width:min(40rem,calc(100vw - 2rem));}
  .contact-dialog .field{margin-bottom:1.3rem;}
  .contact-dialog .check a{
    font-size:inherit;
    letter-spacing:inherit;
    text-transform:none;
  }
  .contact-dialog .privacy-actions{margin-top:1.4rem;}
  .linklike{
    padding:0;
    border:0;
    background:none;
    color:var(--white);
    font:inherit;
    font-size:0.8rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    text-decoration:underline;
    text-underline-offset:0.35em;
    cursor:pointer;
  }
  .linklike:hover{color:var(--red);}
  .linklike:focus-visible{outline:2px solid var(--white);outline-offset:4px;}

  .fine{
    margin-top:1.5rem;
    font-size:0.65rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:#4a4a4a;
  }

  @media (max-width:640px){
    .gallery{grid-template-columns:1fr;}
    .gallery .wide img{aspect-ratio:3/2;}
    .ghost{padding:1rem 1.25rem;letter-spacing:0.14em;}

    .contact{
      font-size:0.72rem;
      letter-spacing:0.08em;
    }

    .brochure-buttons{
      gap:0.7rem;
    }

    .brochure-buttons .ghost{
      padding:0.9rem 1rem;
      font-size:0.68rem;
    }

    .videos{
      padding-left:4vw;
      padding-right:4vw;
    }

    .videos-grid{
      grid-template-columns:1fr;
      gap:2.5rem;
    }

    .video-wrap:not(.is-loaded){
      aspect-ratio:auto;
      min-height:16rem;
    }
    .video-consent{
      gap:0.8rem;
      padding:1.1rem;
    }
    .video-consent p{font-size:0.72rem;}
    .video-consent .ghost{padding:0.85rem 1.4rem;}

    .mid-hint-left{left:0.8rem;right:auto;}
    .mid-hint{
      width:6.4rem;
      right:0.8rem;
      font-size:0.6rem;
      letter-spacing:0.14em;
    }
    .sub-bar{padding:1.1rem 5vw;}
    .back-hint,
    .next-hint{font-size:0.62rem;letter-spacing:0.2em;gap:0.6rem;}
  }

  @media (prefers-reduced-motion:reduce){
    .shimmer{animation:none;background-position:50% 0;}
    .wordmark{animation:none;filter:none;}
    .ghost{animation:none;filter:none;}
    html{scroll-behavior:auto;}
    .track,.pane{scroll-behavior:auto;}
    .scroll-arrow{transition:none;}
    .privacy[open],.privacy[open]::backdrop{animation:none;}
    .beitrag[open] .beitrag-body{animation:none;}
    .beitrag-chevron{transition:none;}
    .arrow-wrap .trail{animation:none;opacity:.3;transform:translateX(calc(var(--dir) * -1.1rem));}
    .arrow-wrap .trail + .trail{opacity:.15;transform:translateX(calc(var(--dir) * -2.2rem));}
    .scroll-hint .arrow-wrap .trail{animation:none;opacity:.3;transform:translateY(-1rem);}
    .scroll-hint .arrow-wrap .trail + .trail{transform:translateY(-2rem);}
  }

  /* Nachbarseiten werden erst beim Wischen nachgeladen; ohne JavaScript bleiben die Platzhalter weg */
  html:not(.js) .pane-ph{display:none;}

  /* Sprachumschalter (DE/EN), unten rechts */
  .lang-switch{
    position:fixed;
    right:1rem;
    bottom:1rem;
    z-index:5;
    padding:0.6rem 0.85rem;
    border:1px solid var(--red);
    background:rgba(0,0,0,0.88);
    color:var(--red);
    font-size:0.72rem;
    font-weight:900;
    letter-spacing:0.22em;
    text-transform:uppercase;
    text-decoration:none;
    transition:background-color .25s ease,color .25s ease;
  }
  .lang-switch:hover,
  .lang-switch:focus-visible{background:var(--red);color:var(--black);}
  .lang-switch:focus-visible{outline:2px solid var(--white);outline-offset:3px;}
  .review-note{
    margin:-0.6rem 0 1.4rem;
    font-size:0.9rem;
    line-height:1.7;
    color:var(--white);
  }
  @media (max-width:640px){
    .lang-switch{right:0.7rem;bottom:0.7rem;}
  }