@charset "UTF-8";
/* -----  1.2 Reset & Normalization  ---------------------------------------- */
#black {height: 100%; width: 100%; overflow: hidden; background-color: #000; position: fixed; z-index: 200;}

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

article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section, summary {
  /* Add correct display for IE 9- and some newer browsers */
  display: block;
}

/* Hintergrund Farben */
.bg-1 { background-color: #e12137;}
.bg-2 { background-color: #22b62c;}
.bg-3 { background-color: #e7d012;}
.bg-4 { background-color: #124de0;}
.bg-5 { background-color: #be4ccb;}
.bg-6 { background-color: #ebae29;}
.bg-7 { background-color: #02c1a8;}
.bg-8 { background-color: #953ac9;}
.bg-9 { background-color: #ce0c87;}
.bg-10 { background-color: #cef225;}

.bg-hellgrau {background-color: #303030;}


/* Text */
body {font-family: UniversLTPro-55Roman; line-height: 28px;}
h1 {color: #B0A489; font-size: 20px;}
h2 {color: #B0A489; font-size: 18px;}
h3 {color: #fff; font-size: 18px; font-family: UniversLTPro-55Roman; margin-top: 10px;}
ul, ol {margin: 0; padding: 0; margin-left: 20px;}
ul li {list-style: disc outside none; }
ol li {list-style: decimal outside none; margin-top: 10px;}
p {margin: 0; padding: 0; font-size: 20px; }
strong {font-family: UniversLTPro-65Bold; font-weight: normal;}

/* Links */
a:visited {text-decoration: none; color: inherit;}
a:link {text-decoration: none; color: inherit;}
a:hover {color: #b0a489;}

/* Bilder */
.img-cover {width: 100%; height: 100%; object-fit: cover; }

/* Generelles */
body {margin: 0; padding: 0; background-color: #1F1820; }
html { margin: 0; padding: 0; overflow-y: scroll; overflow-x: hidden;}
.main { margin: 0 auto; color:#fff; float: left; width: 100%; margin-bottom: 100px; }
.menuebreite {width: 950px;  padding-top: 30px; margin: 0 auto; float: none;}
.ueberragend {width: 1290px; padding-top: 30px; margin: 0 auto; float: none;}
.gaptop {padding-top: 200px;}
.menuebreite iframe {width: 100%; height: 800px;}


/* Seitenbereiche */

.ganz { float: left; margin-top: 20px;padding-left: 20px; padding-right: 20px; margin-bottom: 20px;  color: #CCCCCC; width: 100%;}
.ganz p {margin-bottom: 30px;}
.ganz br {margin-bottom: 10px;}
.flexcontainer {display: flex; justify-content: space-between; float: left; width: 100%;}
.halb {flex: 1;  color: #CCCCCC; font-size: 18px; margin-left:0px;}
.halb .textblock {padding: 20px; background-color: #303030; margin-bottom:1em;}
.halb p {margin-bottom: 15px;}
.halb:nth-child(2n){ margin-right: 0px; margin-left: 20px;}

/* Header */
.mainheader      {width: 950px; margin: 0 auto; position: fixed; left: 0; right: 0;
                  top:50px; margin-left: auto; margin-right: auto; color:#fff; z-index: 200;}
.branding        {height: 50px; width: 100%; float: left; margin-bottom: 10px;}
.branding .datum {font-size: 12px;  height: 50px; float: left; margin-top: 30px;}
.branding .logo  {float: right; width: 28%; margin-top: 0; display: block;}

/* Navigation */
.navigation      {width: 100%; float: left;}
.navigation a { margin-right: 1.5%;}
.navigation a:last-child {margin-right: 0px;}
.menu {margin: 0;}
.menu-item       {list-style: none; display: inline-block; width: 15%;  height: 35px;
                   border: 1px solid #fff; text-transform: lowercase;
                  text-align: center; line-height: 35px; font-size: 20px; }

.menu-item:hover {background-color: rgba(29,29,29,.2);}


/* Panorama */
.panorama {width: 100%; position: relative; overflow: hidden; height: 480px; }
.fixed {position:fixed; z-index: 10; pointer-events:none; height: 300px; }
.slider {position: absolute; width: 100%; height: 100%;}
.panorama-bild {position: absolute; height: calc(100% - 15px); width: 100%; }
.panorama-verlauf {position: fixed; top:0px; height: inherit; width: 100%; background-image: linear-gradient(to bottom, rgba(29, 29, 29, 1), rgba(29, 29, 29, 0)); mix-blend-mode: multiply;}
.panorama-copyright {position: absolute; height: 15px; top: calc(100% - 15px); color:#fff; font-size: 10px; text-align: right; padding-top: 3px; right: 5%; line-height: 15px;}

/* Quadrate */
.square { position: relative; width: 24%; padding-bottom: 24%; float:left; margin: .5%; cursor: pointer; overflow: hidden;}
.square .content { position: absolute; height: 100%; width: 100%; color:#444; background-color: #333333;}
.content .effect { position: absolute; height: calc(100% + 2px); width: calc(100% + 2px); top: -1px; left: -1px; mix-blend-mode: multiply;  display: none;}
.content:hover .effect { display: block;}
.content .text { position: absolute; height: 100%; width: 100%; top: 0px;  display: none; padding: 20px;}
.content .text p {display: table-cell; vertical-align: middle; text-align: center; font-family: UniversLTPro-55Roman; color: #fff; font-size: 1.5rem; padding: 5px;}
.content:hover .text {display: table; }

/* Blog */
.article {display: flex; position: relative; float: left; width: 100%; clear: left; margin-bottom: 20px;}
.blog-image { flex:1;}
.blog-text {background-color: rgba(20,20,20,1); padding: 20px; margin-left: 20px; flex:1;}
.blog-text header {margin-bottom: 1em; padding-right: 30px;}
.blog-text header h2 {font-size: 1.6em;}
.blog-text .text {padding-right: 30px; }
.blog-text .text p {margin-bottom: .5em;}
.blog-text .text a {color: #e12137;}
/* Projekt-Fenster */
#abdunklung { position: absolute; width: 100%; height: 100%; background-color: rgba(10, 10, 10, 0.6); display: none; z-index: 10; top: 0; padding-top: 200px;}
.projekt-fenster { margin: 0 auto; width: 950px; height: auto; background-color: rgba(60, 60, 60 , 1); padding: 20px; border-radius: 2px; pointer-events:all; display: table; margin-top: -20px;}
.projekt-fenster .button { width: 60px; height: 60px; position: absolute; top: 153px; margin-left: 898px; background-color: rgba(60, 60, 60 , 1);
  border-radius: 30px; cursor: pointer;}
.projekt-fenster .button:hover { background-color: rgba(50, 50, 50 , 1);}
.projekt-fenster .button:before, .projekt-fenster .button:after { position: absolute;   left: 30px;   top:10px;   content: ' ';   height: 40px;   width: 1px;   background-color: #fff;}
.projekt-fenster .button:before {  transform: rotate(45deg);}
.projekt-fenster .button:after {  transform: rotate(-45deg); }

.projekt-fenster .links { float: left; width: 50%;}
.projekt-fenster .rechts { float: right; width: 50%; padding-left: 20px;}

.projekt-titel, .projekt-info, .projekt-text {width: 390px; display: block; margin-right: 50px;}
.projekt-titel h1 {color: #fff; font-size: 26px;}
.projekt-info {margin-top: 10px;}
.projekt-info span {margin-top: 5px; display: block; line-height: 22px;}
.projekt-info strong {font-family: UniversLTPro-55Roman; color: #b0a489; }
.projekt-text {margin-top: 10px; line-height: 22px;}

.gallery { margin-top: 0px; width: 450px; height: 450px; overflow: hidden; float: left; clear: both;}
.gallery figure {display: none; position: absolute;}
.gallery .aktiv {display: block;}
.gallery figure img {width: 450px; height: 450px;}
.gallery-buttons {float: left; clear: left; width: 460px;}
.gallery-buttons figure {width: 80px; height: 80px; margin-right: 12px; margin-top: 12px; float: left; background-color: rgb(50, 50, 50); cursor: pointer;}
.gallery-buttons figure:hover img {opacity: .5;}

/* shop */
.headline h1 {font-size: 2rem;}
.headline h1 p {font-size: 2rem; line-height: 2.3rem;}
.shop {width: 49%; padding-bottom: 49%; position: relative; float: left; margin: 1%; margin-right: 0%; cursor: pointer; overflow: hidden;}
.halb .shop { width: 100%; padding-top: 50%; margin: 0; height: auto;}
.shop:nth-child(2n+1) {margin-right: 1%; margin-left: 0%; }
.shop .shopSlider {height: 100%; width: 100%; overflow: hidden; position: absolute; top:0;}
.shop .effect { position: absolute; height: calc(100% + 2px); width: calc(100% + 2px); top: -1px; left: -1px;mix-blend-mode: multiply;  display: none;}
.shop:hover .effect { display: block;}
.shop .text { position: absolute; height: 450px; width: 100%; top: 0px;  display: table; padding: 20px;}
.shop .text p {display: table-cell; vertical-align: middle; text-align: center; font-family: UniversLTPro-55Roman; color: #fff; font-size: 2rem; padding: 5px; line-height: 2.4rem;}
.shop:hover .text {display: table; }

/* Footer */
#footer {position: fixed; bottom: 0px; width: 100vw; height: 35px; background-color: rgba(64,64,64,1); font-size: 14px; z-index: 200; box-shadow: 0px 0px 6px 4px rgba(0, 0, 0, 0.2);}
#footer .alleteile { width: 1000px; margin: 0 auto; height: 35px;}
#footer .alleteile .teil { height: 30px; display: inline-block;}
#footer .alleteile .teil img { float: left; width: 16px; margin-top: 8px; margin-right: 5px;}
#footer .alleteile .teil .text { float: left; line-height: 35px; color: #adadad;  margin-right: 30px;}
#footer .alleteile .teil .text .kurz {font-family: UniversLTPro-65Bold; font-weight: normal; color: #b0a489; }
#footer .alleteile .teil:last-child{float: right;}

/* Newsletter */
.honeypot { position: absolute; left: -9999px; }
.newsletter { position: relative; z-index: 5; background-color: #303030; border-radius: .4em; padding: 4px; width: 100%; height: 34px; display: inline-block; margin-bottom: 1em;}
.newsletter span {margin-left: .6em; color: #B0A489}
.newsletter  input:not([type='checkbox']) { background-color: #000; height: 24px; color: #888; font-size: 1em; padding: 3px; margin-left: .2em; margin-right: .8em; width: 270px; padding-left: .5em;}

.newsletter  input[type = submit] {background-color: #555; color: #B0A489; border-radius: 5px; margin-left: .5em; width: 100px; float: right; margin-right: .2em; margin-top: 1px;}


@media screen and (max-width: 1300px) {
  body {line-height: 26px;}
  h1 {font-size: 19px;}
  h2 {font-size: 17px;}
  h3 {font-size: 17px;}
  p {font-size: 19px; }
  .halb {font-size: 17px }
  .mainheader  {width: 800px; top:40px;}
  .panorama {height: 400px; }
  .menuebreite {width: 800px;  }
  .branding {height: 40px;}
  .branding .datum { margin-top: 15px;}
  .ueberragend {width: 1085px; }
  .gaptop {padding-top: 180px;}
  .navigation a {margin-right: 1.43%;}
  .menu-item { height: 30px; line-height: 30px; font-size: 17px;}
  .projekt-fenster {width: 800px;}
  .projekt-fenster .button {margin-left: 746px;}
  .projekt-titel, .projekt-info, .projekt-text {width: 320px;}
  .projekt-titel h1 {font-size: 22px;}
  .gallery { width: 320px; height: 320px;}
  .gallery figure img {width: 320px; height: 320px;}
  .gallery-buttons {width: 330px;}
  .gallery-buttons figure {width: 70px; height: 70px;}
  .blog-text h2 { font-size: 19px;}
  .blog-text .text p {font-size: 14px; line-height: 18px;}
  .shop .text {width: 390px; height: 390px;}
  #footer .alleteile {width: 950px; font-size: 13px;}
  .newsletter input:not([type='checkbox']) {width: 205px;}
  .newsletter  input[type = submit] {width: 90px;}
}

@media screen and (max-width: 1100px) {
  body {line-height: 23px;}
  h1 {font-size: 17px;}
  h2 {font-size: 15px;}
  h3 {font-size: 15px;}
  p {font-size: 16px; }
  ul, ol {margin-left: 15px;}
  .halb {font-size: 14px }
  .ganz {margin-bottom: 10px;}
  .mainheader  {width: 600px; top: 30px;}
  .panorama {height: 340px; }
  .menuebreite {width: 600px; padding-top: 20px;}
  .menuebreite iframe { height: 600px;}
  .branding {height: 27px;}
  .branding .datum { margin-top: 10px;}
  .ueberragend {width: 810px; }
  .gaptop {padding-top: 120px;}
  .navigation a {margin-right: 1.2%;}
  .menu-item { height: 25px; line-height: 25px; font-size: 13px;}
  .content .text p {font-size: 16px; line-height: 20px;}
  .projekt-fenster {width: 600px; margin-top: -30px;}
  .projekt-fenster .button {margin-left: 546px; top:143px;}
  .projekt-titel, .projekt-info, .projekt-text {width: 280px;}
  .projekt-titel h1 {font-size: 18px;}
  .gallery { width: 280px; height: 280px;}
  .gallery figure img {width: 280px; height: 280px;}
  .gallery-buttons {width: 290px;}
  .gallery-buttons figure {width: 46px; height: 46px;}
  .blog-text header {margin-bottom: 10px;}
  .blog-text h2 { font-size: 14px; line-height: 17px;}
  .blog-text .text p {font-size: 13px; line-height: 17px;}
  .shop .text {width: 290px; height: 290px;}
  #footer .alleteile {width: 900px; font-size: 12px;}
  .newsletter { height: auto;}
  .newsletter input:not([type='checkbox']) {width: calc(100% - .4em); margin-bottom: .2em;}
  .newsletter  input[type = submit]{float: left; margin-left: .2em;}
}

@media screen and (max-width: 850px) {
  body {line-height: 21px;}
  h1 {font-size: 16px;}
  h2 {font-size: 14px;}
  h3 {font-size: 14px;}
  p {font-size: 15px; }
  ul, ol {margin-left: 14px;}
  .halb {font-size: 13px }
  .mainheader  {width: 550px; }
  .panorama {height: 340px; }
  .menuebreite {width: 550px; padding-top: 20px;}
  .menuebreite iframe { height: 550px;}
  .branding .datum { margin-top: 9px;}
  .ueberragend {width: 740px; }
  .gaptop {padding-top: 105px;}
  .navigation a {margin-right: 1.19%;}
  .content .text p {font-size: 14px; line-height: 17px;}
  .blog-text .text p {font-size: 11px; line-height: 15px;}
  .shop .text {width: 270px; height: 270px;}
  #footer .alleteile {width: 800px; font-size: 10px;}
}

@media screen and (max-width: 760px) {
  body {line-height: 26px;}
  h1 {font-size: 20px; margin-bottom: 4px;}
  h2 {font-size: 17px; margin-bottom: 4px;}
  h3 {font-size: 17px;}
  p {font-size: 18px; }
  ul, ol {margin-left: 17px;}
  .flexcontainer {flex-direction: column;}
  .halb:nth-child(2n){ margin-right: 0px; margin-left: 0px; margin-top: 20px;}
  .halb {font-size: 17px }
  .mainheader  {width: 450px; }
  .panorama {height: 280px; }
  .panorama-copyright {font-size: 8px;}
  .menuebreite {width: 450px; padding-top: 10px;}
  .menuebreite iframe { height: 450px;}
  .ueberragend {width: 600px; }
  .gaptop {padding-top: 170px;}
  .branding {height: 25px;}
  .branding .datum {margin-top: 7px;}
  .branding .logo {width: 35%;}
  .navigation a {margin-right: 1%;}
  .navigation .menu-item {width: 32%; height: 35px; line-height: 35px; font-size: 18px; margin-bottom: 8px;}
  .content .text p {font-size: 20px; line-height: 25px;}
  .square { width: 31%; padding-bottom: 31%; margin: 1%;}
  .projekt-fenster {width: 500px; margin-top: -30px;}
  .projekt-fenster .links {width: 100%;}
  .projekt-fenster .rechts {width: 100%; padding-left: 0px; margin-top: 30px;}
  .projekt-fenster .button {margin-left: 446px; top:143px;}
  .projekt-titel, .projekt-info, .projekt-text {width: 100%;}
  .projekt-titel h1 {font-size: 18px;}
  .gallery { width: 100%; height: 300px;}
  .gallery figure {width: 460px;}
  .gallery figure img {width: 100%; height: 300px;}
  .gallery-buttons {width: 100%;}
  .gallery-buttons figure {width: 50px; height: 50px;}
  .shop {width: 100%; padding-bottom: 100%;}
  .shop .text {width: 100%; height: 300px;}
  .blog-text {padding: 12px;}
  #footer .alleteile {width: 96%; font-size: 15px;}
  #footer .adresse .text, #footer .telefon .text  {display: none;}
  #footer .adresse:hover .text { display: block; position: absolute; bottom: 35px; background-color: #333; padding-left: 10px; padding-right: 10px; margin-left: 0px;}
  #footer .zeiten .text .kurz {display: inline-block; margin-left: 30px; cursor: pointer;}
  #footer .telefon:hover .text { display: block; position: absolute; bottom: 35px; background-color: #333; padding-left: 10px; padding-right: 10px; margin-left: 0px;}
  #footer .zeiten .text .lang {display: none; position: absolute; bottom: 35px; background-color: #333; padding-left: 10px; padding-right: 10px; margin-left: 20px;}
  #footer .zeiten .text:hover .lang {display: block;}
  .newsletter { height: auto; border-radius: 0px;}
  .newsletter input {margin-bottom: .5em; width: 95%;}
}

@media screen and (max-width: 650px) {
  .menuebreite {width: 450px; padding-top: 10px;}
  .menuebreite iframe { height: 450px;}
  .branding .datum { margin-top: 7px;}
  .ueberragend {width: 470px; }
  .gaptop {padding-top: 160px;}
  .projekt-fenster {width: 460px; margin-top: -30px;}
  .projekt-fenster .button {margin-left: 410px; top:143px;}
  .gallery figure {width: 417px;}
  .square { width: 46%; padding-bottom: 46%; margin: 2%;}
  .newsletter { height: auto; border-radius: 0px;}
  .newsletter input {margin-bottom: .5em; width: 95%;}
}

@media screen and (max-width: 500px) {
  .mainheader  {width: 300px; top:20px;}
  .menuebreite {width: 100%; padding-top: 10px;}
  .menuebreite iframe { height: 500px;}
  .branding .datum {font-size: 10px; margin-top: 6px;}
  .branding .logo {width: 50%;}
  .navigation a {margin-right: 1%;}
  .navigation .menu-item {width: 31.5%; height: 28px; line-height: 28px; font-size: 14px; margin-bottom: 8px;}
  .ueberragend {width: 100%; }
  .gaptop {padding-top: 145px;}
  .article {flex-direction: column; margin-bottom: 30px;}
  .blog-text {margin-left:0px; padding: 20px;}
  .blog-text h2 { font-size: 20px; line-height: 24px;}
  .blog-text .text p {font-size: 19px; line-height: 24px;}
  #abdunklung { z-index: 250; padding-top: 0; margin-top: 130px}
  .projekt-fenster {width: 100%; top: 30px; margin-top: 0px; min-height: 100%; }
  .projekt-fenster .rechts {margin-top: 10px;}
  .gallery {height: 200px;}
  .gallery figure img {height: 200px;}
  .projekt-fenster .button {top:-20px; margin-left: 78%; z-index: 100;}
  .projekt-fenster, .projekt-fenster  .projekt-text { line-height: 26px;}
  .gallery figure {width: 100%; overflow: hidden; position: relative;}
  .gallery-buttons figure {width: 40px; height: 40px;}
  .projekt-titel h1 {font-size: 14px; line-height: 19px;}
  .square { width: 46%; padding-bottom: 46%; margin: 2%;}
  #footer .zeiten .text .lang {width: 160px; bottom: 40px;}
  #footer .adresse:hover .text, #footer .telefon:hover .text {bottom: 40px;}
  #footer .alleteile {font-size: 12px;}
}

@media screen and (max-width: 380px) {
  .mainheader  {width: 260px; top:20px;}
  .menuebreite {width: 100%; padding-top: 10px;}
  .menuebreite iframe {height: 380px;}
  .branding {height: 16px;}
  .branding .datum {font-size: 8px; margin-top: 4px;}
  .branding .logo {width: 50%;}
  .navigation a {margin-right: 1%;}
  .navigation .menu-item {width: 31%; height: 25px; line-height: 25px; font-size: 12px; margin-bottom: 8px;}
  .panorama {height: 200px;}
  .ueberragend {width: 100%; }
  .gaptop {padding-top: 125px;}
  .square { width: 100%; padding-bottom: 100%; margin: 0; margin-bottom: 10px;}
  .content .text {display: table;}
  .content .text p {font-size: 28px; line-height: 33px;}
  .projekt-fenster {top:0px; padding-top: 40px;}
  .projekt-fenster .button {top: 5px; margin-left: 73%; width: 50px; height: 50px;}
  .projekt-fenster .button:before, .projekt-fenster .button:after {left: 25px; top: 7px; height: 35px;}
  .projekt-titel h1 {font-size: 20px; line-height: 25px; margin-top: 10px;}
  .projekt-fenster .projekt-info {font-size: 14px; line-height: 16px;}
  .gallery {height: 220px;}
  .gallery figure img {height: 220px;}
  .gallery-buttons figure {width: 30px; height: 30px;}
  .blog-text {margin-top: -10px;}
  #footer {height: 40px;}
  #footer .alleteile {font-size: 11px; width: 90%;}
  #footer .alleteile .teil {height: 40px; margin-right: 10px;}
  #footer .alleteile .teil img {width: 22px;}
  #footer .alleteile .teil .text {line-height: 40px; margin-right: 0px;}
  #footer .alleteile .teil.zeiten {display: none;}

}

/* lichtbreust.de – Herstellernamen auf Touch-Geräten (iPad, Smartphone)
   Ans Ende von /assets/css/index.css anhängen.
   Am Desktop (mit Maus) ändert sich nichts: dort bleibt das Farbspiel beim Überfahren.

   Auf Touch-Geräten liegt der Name exakt dort wie beim Überfahren (mittig im Quadrat),
   auf einer leicht abgedunkelten Fläche. Die Flächen atmen ganz langsam:
   dunkler = Name deutlich, heller = Name zart. Jedes Quadrat hat eine andere Phase. */

@media (hover: none) {

  .square .content .text {
    display: table;                       /* wie im Hover-Zustand */
    background-color: rgba(0, 0, 0, .45); /* Grundton: 0 = klar, .8 = sehr dunkel */
    animation: lb-wabern 10s ease-in-out infinite;
  }

  .square .content .text p {
    text-shadow: 0 0 12px rgba(0, 0, 0, .6);
    animation: lb-name 10s ease-in-out infinite;
  }

  /* Varianz: jedes Quadrat bekommt Phase und Tempo aus einer von mehreren Gruppen.
     Durch die verschiedenen Teiler (2, 3, 5, 7) ergibt sich ein unregelmaessiges Muster. */
  a:nth-child(2n)   > .square .content .text,
  a:nth-child(2n)   > .square .content .text p { animation-duration: 8.5s;  animation-delay: -2.1s; }
  a:nth-child(3n)   > .square .content .text,
  a:nth-child(3n)   > .square .content .text p { animation-duration: 11.5s; animation-delay: -6.6s; }
  a:nth-child(3n+2) > .square .content .text,
  a:nth-child(3n+2) > .square .content .text p { animation-delay: -4.4s; }
  a:nth-child(5n)   > .square .content .text,
  a:nth-child(5n)   > .square .content .text p { animation-duration: 9.5s;  animation-delay: -8.3s; }
  a:nth-child(7n+1) > .square .content .text,
  a:nth-child(7n+1) > .square .content .text p { animation-duration: 12s;   animation-delay: -1.2s; }
  a:nth-child(7n+4) > .square .content .text,
  a:nth-child(7n+4) > .square .content .text p { animation-duration: 8s;    animation-delay: -5.5s; }
}

@keyframes lb-wabern {
  0%, 100% { background-color: rgba(0, 0, 0, .22); }
  50%      { background-color: rgba(0, 0, 0, .72); }
}

@keyframes lb-name {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}

@media (hover: none) and (prefers-reduced-motion: reduce) {
  .square .content .text,
  .square .content .text p { animation: none; }
  .square .content .text p { opacity: 1; }
}

/* lichtbreust.de – SEO: unsichtbare, aber lesbare Hauptueberschrift (h1) fuer Suchmaschinen und Screenreader */
.nur-lesbar {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Projektkacheln sind jetzt Links: keine Linkfarbe/Unterstreichung erzwingen */
a.projektlink, a.projektlink:hover { text-decoration: none; color: inherit; }

/* lichtbreust.de – Desktop / Mausgeraete: die Farbflaechen der Quadrate "atmen" langsam und unregelmaessig.
   Es ist dieselbe Farbe, die sonst nur beim Ueberfahren erscheint (jedes Quadrat hat seine eigene).
   Der Name bleibt verborgen – das Spiel soll neugierig machen, mit der Maus drueberzufahren.
   Beim Ueberfahren zeigt das Quadrat sofort volle Farbe und den Namen, wie bisher.
   Auf Touch-Geraeten gilt stattdessen der Block "hover: none" weiter oben. */

@media (hover: hover) {

  .square .content .effect {
    display: block;
    opacity: 0;
    pointer-events: none;
    animation: lb-farbe 23.4s ease-in-out infinite;   /* Grundrhythmus */
  }

  .square .content:hover .effect {
    animation: none;
    opacity: 1;
  }

  /* einzelne Rhythmen: jedes Quadrat hat Phase und Tempo aus einer Gruppe */
  a:nth-child(2n)    > .square .content .effect { animation-duration: 15.6s;  animation-delay: -8.1s; }
  a:nth-child(3n)    > .square .content .effect { animation-duration: 28.6s; animation-delay: -19.2s; }
  a:nth-child(3n+2)  > .square .content .effect { animation-delay: -13.5s; }
  a:nth-child(5n)    > .square .content .effect { animation-duration: 19.5s; animation-delay: -3.4s; }
  a:nth-child(7n+1)  > .square .content .effect { animation-duration: 31.2s; animation-delay: -25.0s; }
  /* wenige "Lockvoegel": kraeftigere Farbe, damit man zum Ueberfahren verleitet wird */
  a:nth-child(7n+4)  > .square .content .effect { animation-name: lb-lock; animation-duration: 18.2s; animation-delay: -11.4s; }
  a:nth-child(11n+6) > .square .content .effect { animation-name: lb-lock; animation-duration: 24.7s; animation-delay: -22.9s; }
}

@keyframes lb-farbe {
  0%, 100% { opacity: 0; }
  28%      { opacity: .62; }
  50%      { opacity: .14; }
  76%      { opacity: .66; }
}

@keyframes lb-lock {
  0%, 100% { opacity: .06; }
  30%      { opacity: .78; }
  55%      { opacity: .20; }
  80%      { opacity: .74; }
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .square .content .effect { animation: none; opacity: .18; }
}

/* lichtbreust.de – Platz besser nutzen (Stand 2026-10-08)
   1) Titelbild passt sich der Fensterhoehe an: auf niedrigen Bildschirmen (iPad quer) kleiner,
      auf grossen Desktops unveraendert hoch. Dadurch ist mehr Text ohne Scrollen sichtbar.
   2) Navigation sitzt etwas hoeher; die Abstaende zwischen Datum, Logo und Navigation bleiben gleich.
   Aenderung rueckgaengig: diesen Block (bis zum Dateiende) loeschen. */

.panorama:not(.fixed) { height: clamp(300px, 42vh, 480px); }

.mainheader { top: 34px; }

@media screen and (max-width: 1300px) {
  .panorama:not(.fixed) { height: clamp(290px, 42vh, 400px); }
  .mainheader { top: 26px; }
}

@media screen and (max-width: 1100px) {
  .panorama:not(.fixed) { height: clamp(260px, 40vh, 340px); }
  .mainheader { top: 20px; }
}

@media screen and (max-width: 760px) {
  .panorama:not(.fixed) { height: 280px; }
}

/* lichtbreust.de – Blog: Einzelseiten, Titel als Link, Markierung "abgelaufen" (Stand 2026-10-20) */

.blog-text header h1 {font-size: 1.6em;}
.article-title a, .article-title a:hover {color: inherit; text-decoration: none;}
.article-title a:hover {text-decoration: underline;}
.blog-text .zurueck {margin-top: 1.2em; font-size: .85em;}
.blog-text .zurueck a {color: #b0a489;}

/* abgelaufene Beitraege: bleiben sichtbar, wirken aber wie ein Rueckblick */
.abgelaufen-marke {
  display: inline-block;
  margin-top: .3em;
  padding: 0 .6em;
  border: 1px solid #b0a489;
  border-radius: 3px;
  color: #b0a489;
  font-size: .8em;
  line-height: 1.6;
  letter-spacing: .04em;
  text-transform: lowercase;
}
.article.abgelaufen .blog-image img {filter: grayscale(.6); opacity: .75;}
.article.abgelaufen .blog-text .text {opacity: .7;}

@media screen and (max-width: 1300px) { .blog-text h1 { font-size: 19px;} }
@media screen and (max-width: 1100px) { .blog-text h1 { font-size: 14px; line-height: 17px;} }
@media screen and (max-width: 500px)  { .blog-text h1 { font-size: 20px; line-height: 24px;} }

/* Newsletter-Felder immer anklickbar */
.newsletter input, .newsletter form { pointer-events: auto; -webkit-user-select: text; user-select: text; }
.newsletter input[type='submit'] { cursor: pointer; -webkit-appearance: none; appearance: none; }

/* Menue-Rahmen duenner; Logo sitzt auf der Grundlinie des Datums */
.menu-item { border-color: rgba(255,255,255,.8); }
@media (min-resolution: 2dppx) { .menu-item { border-width: .5px; border-color: #fff; } }

/* Datum und Logo teilen sich eine Grundlinie (Unterkante) */
.branding { display: flex; justify-content: space-between; align-items: flex-end; }
.branding .datum, .branding .datum[class] { float: none; margin-top: 0 !important; height: auto; line-height: 1; padding-bottom: 0; margin-bottom: -.2em; }
.branding .logo { float: none; flex: 0 0 auto; }
.branding .logo img { display: block; width: 100%; height: auto; }

/* Newsletter: bei mittleren Fensterbreiten Felder nebeneinander */
@media screen and (min-width: 561px) and (max-width: 1100px) {
  .newsletter { height: auto; }
  .newsletter form { display: flex; flex-wrap: nowrap; align-items: center; gap: .4em; }
  .newsletter span { margin-left: .6em; white-space: nowrap; flex: 0 0 auto; }
  .newsletter input:not([type='checkbox']):not([type='submit']) { flex: 1 1 0; min-width: 0; width: auto; margin: 0; }
  .newsletter input[type = submit] { float: none; flex: 0 0 auto; width: 90px; margin: 0 .2em 0 0; }
}
@media screen and (min-width: 561px) and (max-width: 850px) {
  .newsletter form { flex-wrap: wrap; }
  .newsletter span { flex: 0 0 100%; margin-bottom: .2em; }
  .newsletter input:not([type='checkbox']):not([type='submit']) { margin-left: .2em; }
}

/* =====================================================================================
   lichtbreust.de – Stand 2026-10-24: Titelbild mit Spruechen, Glas-Optik, Menue, Blog, Uebergaenge
   ===================================================================================== */

/* Hintergrund: zwei sehr dezente Lichtinseln, damit die Glas-Panele etwas zum "Durchscheinen" haben */
body {
  background: radial-gradient(1100px 700px at 8% -6%, rgba(176,164,137,.16), transparent 62%),
              radial-gradient(900px 700px at 100% 38%, rgba(225,33,55,.07), transparent 62%),
              radial-gradient(900px 600px at 20% 100%, rgba(176,164,137,.08), transparent 60%),
              #1F1820;
  background-attachment: fixed;
}

/* Schatten oben: nur ein Band hinter dem Menue. Inhalt verschwindet beim Scrollen im Dunkeln hinter dem Menue,
   nichts wird darunter abgedunkelt. Auf Seiten mit grossem Titelbild erscheint das Band erst nach dem Scrollen. */
.panorama-verlauf {
  position: fixed; top: 0; left: 0; width: 100%; height: 215px;
  background-image: linear-gradient(to bottom, rgba(31,24,32,1) 0, rgba(31,24,32,1) 148px, rgba(31,24,32,0) 215px);
  mix-blend-mode: normal; pointer-events: none; z-index: 10;
  transition: opacity .5s ease;
}
body:has(.panorama:not(.fixed)) .panorama-verlauf { opacity: 0; }
html.gescrollt body:has(.panorama:not(.fixed)) .panorama-verlauf { opacity: 1; }

/* Menue: Abstand zu Datum/Logo, Glas-Hintergrund (10 % weiss), aktiver Punkt bleibt durchsichtig */
.branding { margin-bottom: 24px; }
@media screen and (max-width: 760px) { .branding { margin-bottom: 16px; } }
.menu-item {
  background-color: rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.menu-item:hover { background-color: rgba(255,255,255,.18); }
.menu-item.is-active, .menu-item.is-active:hover { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ----- Titelbild (Startseite): Folien mit Spruch ----- */
.hero { position: relative; overflow: hidden; background: #1F1820; }
.hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 210px; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, rgba(31,24,32,.88), rgba(31,24,32,0)); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(31,24,32,.92), rgba(31,24,32,.45) 55%, rgba(31,24,32,0)); }
.hero-bilder { position: absolute; inset: 0; }
.js-an .hero-bilder { opacity: 0; transition: opacity 1.4s ease; }
.js-an .hero.bereit .hero-bilder { opacity: 1; }
.hero-folie { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 2.2s ease; overflow: hidden; }
.hero-folie.ist-sichtbar { opacity: 1; }
.hero-folie img { display: block; width: 103%; max-width: none; height: 100%; object-fit: cover; will-change: transform; }
.hero-folie.laeuft img { animation: lb-drift 17s linear forwards; }
@keyframes lb-drift { from { transform: translateX(0); } to { transform: translateX(-2.9%); } }

.hero-unten { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding-bottom: 18px; transition: opacity 1.8s ease; }
.hero-unten.wechselt { opacity: 0; }
.hero-inhalt { width: 950px; max-width: calc(100% - 40px); margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hero-spruch { margin: 0; max-width: 700px; color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.55); }
.hero-spruch p { font-size: 34px; line-height: 40px; text-transform: lowercase; letter-spacing: .005em; }
.hero-spruch footer { margin-top: 8px; font-size: 13px; line-height: 18px; color: #B0A489; text-transform: lowercase; letter-spacing: .03em; }
.hero-herz { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 4px; padding: 7px 14px 7px 11px; cursor: pointer;
  color: #fff; font: inherit; font-size: 15px; line-height: 1;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .25s, transform .25s; }
.hero-herz svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; transition: fill .3s, stroke .3s, transform .3s; }
.hero-herz:hover { background: rgba(255,255,255,.18); }
.hero-herz.geliked { cursor: default; }
.hero-herz.geliked svg { fill: #e12137; stroke: #e12137; transform: scale(1.12); }
.hero-fuss { width: 950px; max-width: calc(100% - 40px); margin: 14px auto 0; font-size: 12px; line-height: 16px; color: rgba(255,255,255,.72); letter-spacing: .04em; display: flex; gap: 18px; text-transform: lowercase; }
.hero-fuss a { color: rgba(255,255,255,.72); }
.hero-fuss a:hover { color: #fff; }
.hero-fuss .hero-alle { margin-left: auto; }

@media screen and (max-width: 1100px) { .hero-spruch p { font-size: 28px; line-height: 34px; } }
@media screen and (max-width: 760px) {
  .hero-spruch p { font-size: 21px; line-height: 26px; }
  .hero-inhalt { gap: 12px; }
  .hero-unten { padding-bottom: 12px; }
  .hero::after { height: 75%; }
}
@media (prefers-reduced-motion: reduce) { .hero-folie.laeuft img { animation: none; } .hero-folie { transition-duration: .6s; } }

/* ----- Glas-Panele (Textbloecke, Blog, Newsletter) ----- */
.halb .textblock, .blog-text, .newsletter {
  position: relative;
  background: linear-gradient(150deg, rgba(255,255,255,.115) 0%, rgba(255,255,255,.04) 42%, rgba(255,255,255,.075) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,.13);
  border-top-color: rgba(255,255,255,.30); border-left-color: rgba(255,255,255,.22);
  border-radius: 20px;
  box-shadow: 0 14px 44px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(255,255,255,.05), inset 0 0 46px rgba(255,255,255,.03);
}
.halb .textblock::before, .blog-text::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 70% at 0% 0%, rgba(255,255,255,.13), rgba(255,255,255,0) 58%);
}
.newsletter { border-radius: 16px; padding: 5px; }
.halb .textblock { padding: 26px 28px; }

/* Download-Link in den Leistungen */
.textblock p.download { margin-top: 18px; font-size: 16px; }
.textblock p.download a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 1px; }
.textblock p.download a:hover { color: #B0A489; border-color: #B0A489; }
.textblock p.download span { color: #999; }

/* ----- Blog: nur Liste, groessere Schrift ----- */
.blog-image { border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.04); }
.article { margin-bottom: 28px; scroll-margin-top: 170px; }
.article .blog-text { padding: 30px 34px; }
.article .blog-text header h2 { font-size: 32px; line-height: 38px; font-weight: normal; color: #B0A489; }
.article .blog-text .text p { font-size: 19px; line-height: 28px; margin-bottom: .8em; }
.article .blog-text .text { padding-right: 0; }
.article .blog-text .text, .article .blog-text header { position: relative; z-index: 1; }
.bildnachweis { margin-top: 1.2em; font-size: 12px !important; line-height: 16px !important; color: #8a8a8a; letter-spacing: .03em; }
@media screen and (max-width: 1100px) {
  .article .blog-text { padding: 22px 24px; }
  .article .blog-text header h2 { font-size: 26px; line-height: 32px; }
  .article .blog-text .text p { font-size: 17px; line-height: 25px; }
}
@media screen and (max-width: 500px) {
  .article .blog-text header h2 { font-size: 24px; line-height: 30px; }
  .article .blog-text .text p { font-size: 17px; line-height: 25px; }
}

/* ----- Einblenden beim Scrollen, sanfte Seitenuebergaenge ----- */
.js-an .reveal { opacity: 0; transform: translateY(22px); transition: opacity 1s ease, transform 1s ease; }
.js-an .reveal.sichtbar { opacity: 1; transform: none; }
.js-an .flexcontainer .halb.reveal:nth-child(2) { transition-delay: .18s; }

@keyframes lb-ein { from { opacity: 0; } to { opacity: 1; } }
.js-an main.main { animation: lb-ein .7s ease both; transition: opacity .35s ease; }
.js-an main.main.lb-weg { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .js-an main.main { animation: none; }
  .js-an .reveal { opacity: 1; transform: none; transition: none; }
}

/* Blog-Bilder in ihrem Seitenverhaeltnis (nichts abschneiden) */
.article .blog-image { align-self: flex-start; }
.article .blog-image img { display: block; width: 100%; height: auto; }

/* Titelbild auf dem Handy: hoeher, Herz unter dem Spruch, damit nichts unter das Menue rutscht */
@media screen and (max-width: 760px) {
  .panorama.hero:not(.fixed) { height: clamp(400px, 64vh, 540px); }
  .hero-inhalt { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero-spruch p { font-size: 20px; line-height: 25px; }
  .hero-herz { margin-bottom: 0; }
  .hero-fuss { margin-top: 10px; }
}


/* ================= Runde 3: ruhiger, kleinere Radien, saubere Raender ================= */
:root { --sp: 950px; }
@media screen and (max-width: 1300px) { :root { --sp: 800px; } }
@media screen and (max-width: 1100px) { :root { --sp: 600px; } }
@media screen and (max-width: 850px)  { :root { --sp: 550px; } }
@media screen and (max-width: 760px)  { :root { --sp: 450px; } }
@media screen and (max-width: 500px)  { :root { --sp: calc(100% - 32px); } }

/* Zitat, Fusszeile und Footer laufen exakt auf den Raendern der Textspalte */
.hero-inhalt, .hero-fuss { width: var(--sp); max-width: 100%; box-sizing: border-box; }
#footer .alleteile { width: var(--sp) !important; max-width: 100%; box-sizing: border-box; }
#footer .alleteile .teil:first-child img { margin-left: 0; }

/* Glas: kaum sichtbar, kleine Radien, ganz leichte Bewegung (links anders als rechts) */
.halb .textblock, .kueche .textblock, .blog-text, .newsletter, .rahmen-360 {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.045);
  -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%);
  border: 1px solid rgba(255,255,255,.07);
  border-top-color: rgba(255,255,255,.15); border-left-color: rgba(255,255,255,.11);
  border-radius: 5px;
  box-shadow: 0 6px 24px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.07);
}
.halb .textblock::before, .kueche .textblock::before, .blog-text::before, .rahmen-360::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(105deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 58%, rgba(255,255,255,.028) 100%);
  background-size: 230% 100%; background-position: 0% 0;
  animation: lb-glanz 26s ease-in-out infinite alternate;
}
.halb:nth-child(2) .textblock::before { animation-duration: 33s; animation-direction: alternate-reverse; }
.kueche .textblock::before { animation-duration: 29s; }
.article .blog-text::before { animation-duration: 32s; }
@keyframes lb-glanz { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.halb .textblock > *, .kueche .textblock > * { position: relative; z-index: 1; }
.newsletter { border-radius: 5px; padding: 5px; }
.blog-image { border-radius: 5px; }
@media screen and (max-width: 650px) { .newsletter { border-radius: 5px; } }
@media (prefers-reduced-motion: reduce) {
  .halb .textblock::before, .kueche .textblock::before, .blog-text::before { animation: none; }
}

/* Kuechen-Panel unter den beiden Quadraten, volle Breite */
.kueche { display: block; width: 100%; margin-bottom: 1em; color: #ccc; }
.kueche .textblock { padding: 26px 28px; }
.kueche h1 { margin: 0 0 8px; }
.kueche p { font-size: 18px; line-height: 27px; }
.kueche p.download { margin-top: 14px; }
.js-an .kueche.reveal { transition-delay: .3s; }

/* Menue: Glasflaechen, winzige Radien, etwas hoeher */
.menu-item { border-radius: 3px; height: 43px; line-height: 43px; }
@media screen and (max-width: 1300px) { .menu-item { height: 38px; line-height: 38px; } }
@media screen and (max-width: 1100px) { .menu-item { height: 32px; line-height: 32px; } }
@media screen and (max-width: 760px)  { .navigation .menu-item { height: 40px; line-height: 40px; } }
@media screen and (max-width: 500px)  { .navigation .menu-item { height: 36px; line-height: 36px; } }
@media screen and (max-width: 380px)  { .navigation .menu-item { height: 32px; line-height: 32px; } }

/* Zitat: Autor direkt darunter, Herz direkt am Zitat */
.hero-inhalt { display: block; }
.hero-zitat { display: flex; align-items: flex-end; gap: 14px; }
.hero-spruch { max-width: 640px; }
.hero-spruch footer { margin-top: 3px; }
.hero-herz { margin-bottom: 2px; }
.panorama.hero:not(.fixed) { height: clamp(380px, 56vh, 600px); }

/* Fusszeile im Titelbild: Instagram links, Projekt und Uebersicht rechts */
.hero-fuss { justify-content: space-between; align-items: center; }
.hero-rechts { display: inline-flex; gap: 18px; align-items: center; }
.hero-fuss .hero-alle { margin-left: 0; }
.hero-insta { display: inline-flex; align-items: center; gap: 7px; }
.hero-insta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.hero-insta svg .punkt { fill: currentColor; stroke: none; }
@media screen and (max-width: 760px) {
  .hero-zitat { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-rechts { gap: 12px; }
}
#footer .alleteile .teil:last-child .text { margin-right: 0; }


/* ================= Runde 4: Menue ohne Unschaerfe, beleuchteter Rand; Zitat mit Herz am Wortende ================= */
.menu-item {
  position: relative; border: 0 !important; box-sizing: border-box; border-radius: 3px;
  background-color: rgba(255,255,255,.10);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.menu-item:hover { background-color: rgba(255,255,255,.17); }
.menu-item.is-active, .menu-item.is-active:hover { background-color: transparent; }
.menu-item::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.26) 20%, rgba(255,255,255,.72) 44%, rgba(255,255,255,.2) 70%, rgba(255,255,255,.88) 100%);
  background-size: 320% 100%; background-position: 0% 0;
  animation: lb-rand 29s ease-in-out infinite alternate;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@media (min-resolution: 2dppx) { .menu-item::after { padding: .6px; } }
@keyframes lb-rand { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .menu-item::after { animation: none; } }
/* Ziffern (360°) stehen optisch zu hoch: etwas tiefer setzen */
.menu-item.ziffer { padding-top: .03em; }

.hero-spruch { max-width: 720px; }
.hero-spruch p { text-wrap: balance; }
.hero-spruch p .w { white-space: nowrap; }
.hero-spruch p .z { opacity: 1; }
.js-an .hero-spruch p .z { opacity: 0; transition: opacity .9s ease; }
.js-an .hero-spruch p .z.da { opacity: 1; }
.hero-spruch p .hero-herz { display: inline-flex; vertical-align: .55em; margin: 0 0 0 .6em; padding: 4px 11px 4px 8px; font-size: 15px; line-height: 20px; }
.hero-spruch p .hero-herz svg { width: 17px; height: 17px; }
.hero-fuss { margin-top: 30px; }
@media screen and (max-width: 760px) { .hero-fuss { margin-top: 18px; } }
.menu-item { vertical-align: top; }
.hero-spruch p .hero-herz { vertical-align: baseline; position: relative; top: -.5em; height: 22px; box-sizing: border-box; }

/* ================= Runde 5: Handy ================= */
@media screen and (max-width: 760px) {
  /* Kopf: Menue ueber die volle Breite, groessere Tippflaechen */
  .mainheader, .mainheader[class] { width: calc(100% - 32px); }
  .branding { margin-bottom: 14px; }
  .menu { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
  .navigation a, .navigation a:last-child { display: block; flex: 0 0 calc((100% - 20px) / 3); margin: 0; }
  .navigation .menu-item { display: block; width: 100%; height: 46px; line-height: 46px; font-size: 18px; margin: 0; }
  .navigation .menu-item.ziffer { padding-top: .03em; }
  .gaptop { padding-top: 205px; }

  /* Titelbild flacher */
  .panorama.hero:not(.fixed) { height: clamp(330px, 42vh, 400px); }
  .hero-fuss { flex-wrap: nowrap; gap: 10px; }
  .hero-rechts { min-width: 0; flex: 0 1 auto; gap: 10px; }
  .hero-rechts .hero-projekt-link, .hero-rechts a:not(.hero-alle) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero-alle, .hero-insta { white-space: nowrap; flex: 0 0 auto; }

  /* Seitenraender */
  .menuebreite { box-sizing: border-box; padding-left: 16px; padding-right: 16px; }

  /* Blog: Bild und Text in einem Rahmen */
  .article {
    display: flex; flex-direction: column; float: none; width: 100%; box-sizing: border-box; overflow: hidden; position: relative;
    background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); border-top-color: rgba(255,255,255,.15);
    border-radius: 5px; box-shadow: 0 6px 24px rgba(0,0,0,.20);
  }
  .article .blog-image { display: block; background: none; border-radius: 0; flex: none; }
  .article .blog-image img { display: block; width: 100%; height: auto; border: 0; }
  .article .blog-text {
    background: none; border: 0; box-shadow: none; border-radius: 0; margin: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible;
  }
  .article .blog-text::before { display: none; }

  /* Namen der Projekte in den Kacheln: nichts abschneiden */
  .square .content .text p { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; font-size: 19px; line-height: 23px; }

  /* Footer: hoeher, mit Luft zu den Seiten, grosse Tippflaechen */
  #footer { height: 58px; padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; }
  #footer .alleteile { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 44px) !important; height: 58px; }
  #footer .alleteile .teil, #footer .alleteile .teil:last-child { float: none; height: auto; margin: 0; display: flex; align-items: center; }
  #footer .alleteile .teil a { display: flex; align-items: center; min-width: 44px; min-height: 44px; }
  #footer .alleteile .teil img { float: none; width: 26px; margin: 0; }
  #footer .alleteile .teil .text { float: none; line-height: 1.2; margin: 0; font-size: 15px; }
  #footer .teil.zeiten .text .kurz { margin-left: 0; }
  .main { margin-bottom: 130px; }
}
@media screen and (max-width: 380px) { #footer .alleteile .teil.zeiten { display: flex; } #footer .alleteile .teil .text { font-size: 13px; } }

/* Newsletter am Handy: Name, eMail, darunter Text und Senden */
@media screen and (max-width: 560px) {
  .newsletter { height: auto; padding: 10px; }
  #newsletter-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  #newsletter-form input:not([type='submit']):not([type='hidden']) { order: 1; flex: 1 1 100%; width: 100%; box-sizing: border-box; height: 40px; margin: 0; font-size: 17px; }
  #newsletter-form > span { order: 2; flex: 1 1 auto; margin: 0 0 0 2px; white-space: nowrap; font-size: 15px; }
  #newsletter-form input[type='submit'] { order: 3; flex: 0 0 auto; float: none; width: auto; margin: 0; padding: 0 22px; height: 38px; }
  #newsletter-form .honeypot { order: 9; }
}

/* Logo und Datum auf dem Titelbild: oben nur ganz leicht abgedunkelt, damit das Logo leuchtet */
.hero::before { height: 170px; background: linear-gradient(to bottom, rgba(31,24,32,.36), rgba(31,24,32,0)); }
@media screen and (max-width: 760px) {
  #footer .alleteile .teil .text, #footer .alleteile .teil .text * { white-space: nowrap; font-size: 14px; }
}
@media screen and (max-width: 760px) {
  #footer .alleteile .teil .text, #footer .alleteile .teil .text * { font-size: 13px; }
  #footer .alleteile .teil a { min-width: 38px; }
  #footer .alleteile .teil img { width: 24px; }
  #footer .alleteile { gap: 6px; }
}


/* ================= Runde 6 ================= */
/* Herz erscheint erst, wenn der Spruch fertig geschrieben ist; etwas weiter weg und hoeher, ausgewogene Form */
.hero-spruch p .hero-herz { margin-left: .95em; top: -.66em; padding: 4px 11px; gap: 6px; transition: opacity 1.1s ease, background .25s, transform .25s; }
.hero-spruch.tippt p .hero-herz { opacity: 0; pointer-events: none; }
.hero-spruch footer { margin-top: 0; line-height: 16px; }

/* Glas: auch rechts Licht (Gegenschimmer), rechter Rand wie der linke */
.halb .textblock, .kueche .textblock, .blog-text { border-right-color: rgba(255,255,255,.11); }
.halb .textblock::after, .kueche .textblock::after, .blog-text::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(255deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 62%, rgba(255,255,255,.03) 100%);
  background-size: 240% 100%; background-position: 100% 0;
  animation: lb-glanz-r 31s ease-in-out infinite alternate;
}
.halb:nth-child(2) .textblock::after { animation-duration: 24s; animation-direction: alternate-reverse; }
.kueche .textblock::after { animation-duration: 35s; }
.article .blog-text::after { animation-duration: 37s; }
@keyframes lb-glanz-r { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .halb .textblock::after, .kueche .textblock::after, .blog-text::after { animation: none; } }
@media screen and (max-width: 760px) { .article .blog-text::after { display: none; } }

/* Beide Leistungs-Panele gleich gross */
.flexcontainer { display: flex; align-items: stretch; }
.flexcontainer .halb { display: flex; margin-bottom: 1em; }
.flexcontainer .halb .textblock { flex: 1; margin-bottom: 0; box-sizing: border-box; }
@media screen and (max-width: 760px) { .flexcontainer { display: block; } .flexcontainer .halb { display: block; } }

/* Newsletter: +++ etwas hoeher, mehr Luft hinter "Neuigkeiten" */
.newsletter .plus { position: relative; top: -.13em; margin: 0; }
@media screen and (min-width: 561px) { .newsletter > form > span:first-child, #newsletter-form > span { margin-right: .9em; } }
@media screen and (max-width: 560px) { #newsletter-form > span { margin-top: 6px; } #newsletter-form { gap: 10px; } }

/* Titelbild: Abdunklung unten schmaler und weicher, etwas Licht */
.hero::after { height: 30%; background: linear-gradient(to top, rgba(31,24,32,.82), rgba(31,24,32,.28) 55%, rgba(31,24,32,0)); }
@media screen and (max-width: 760px) { .hero::after { height: 44%; } }
.hero-spruch { text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.hero-folie img { filter: saturate(1.06); }
.hero-bilder::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: screen;
  background: radial-gradient(75% 70% at 50% 82%, rgba(255,238,210,.16), rgba(255,238,210,0) 65%);
  animation: lb-atmen 14s ease-in-out infinite alternate;
}
@keyframes lb-atmen { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-bilder::after { animation: none; } }


/* ================= Runde 7 ================= */
/* Herz und Zahl: sauber mittig zueinander */
.hero-spruch p .hero-herz { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px 0 10px; height: 24px; line-height: 1; box-sizing: border-box; }
.hero-spruch p .hero-herz svg { display: block; width: 16px; height: 16px; flex: none; }
.hero-spruch p .hero-herz span { display: block; line-height: 1; font-size: 14px; font-variant-numeric: tabular-nums; transform: translateY(.5px); }
/* Autor erscheint erst nach dem Herz */
.hero-spruch footer { transition: opacity 1.4s ease 1.1s; }
.hero-spruch.tippt footer { opacity: 0; transition: none; }
/* Beim Seitenstart zuerst unsichtbar, dann Einblenden zusammen mit der Schrift */
.js-an .hero:not(.bereit) .hero-unten { opacity: 0; }
.panorama.hero:not(.fixed) { height: clamp(420px, 62vh, 680px); }
@media screen and (max-width: 760px) { .panorama.hero:not(.fixed) { height: clamp(330px, 42vh, 400px); } }

/* Panele: sofort verborgen (kein Aufblitzen), Text laeuft nacheinander ein */
.js-an .reveal:not(.sichtbar) { opacity: 0; }
.js-an .reveal .ein { opacity: 0; transform: translateY(10px); transition: opacity .9s ease, transform .9s ease; }
.js-an .reveal.sichtbar .ein { opacity: 1; transform: none; transition-delay: calc(.35s + var(--i, 0) * .09s); }
@media (prefers-reduced-motion: reduce) { .js-an .reveal .ein { opacity: 1; transform: none; transition: none; } }


/* ================= Runde 8 ================= */
/* Kein Schatten hinter Schrift: Lesbarkeit kommt allein vom schmalen Verlauf unten */
.hero-spruch, .hero-spruch p, .hero-spruch footer { text-shadow: none; }

/* Pille: bleibt in der eigenen Zeile (kein Hineinragen in die Zeile darueber) */
.hero-spruch p .hero-herz { top: -.24em; margin-left: 1em; }

/* Menue: Flaeche etwas staerker, Rand eingerueckt -> ein Ring Flaeche bleibt aussen sichtbar */
.menu-item { background-color: rgba(255,255,255,.14); }
.menu-item:hover { background-color: rgba(255,255,255,.20); }
.menu-item::after { inset: 2px; border-radius: 2px; }
@media screen and (max-width: 760px) {
  .menu-item { background-color: rgba(255,255,255,.18); }
  .menu-item::after { inset: 1px; border-radius: 2px; }
}

/* Abstaende in den Textpanelen */
.textblock ul + h1, .textblock ul + h2, .textblock ul + h3, .textblock ul + p { margin-top: 26px; }
.headline h1 { margin-bottom: 26px; line-height: 1.3; }

/* Blog: Eintraege deutlicher voneinander abgesetzt */
.article { margin-bottom: 46px; }
.article .blog-text { background-color: rgba(255,255,255,.075); border-color: rgba(255,255,255,.14); border-top-color: rgba(255,255,255,.24); box-shadow: 0 12px 36px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.1); }
.article .blog-image { box-shadow: 0 12px 36px rgba(0,0,0,.38); }

@media screen and (max-width: 760px) {
  /* Titelbild-Schrift groesser */
  .hero-spruch p { font-size: 25px; line-height: 31px; }
  .hero-spruch footer { font-size: 15px; line-height: 20px; margin-top: 2px; }
  .hero-spruch p .hero-herz { height: 26px; }
  /* Startseite: Newsletter ganz nach hinten, weniger Luft unter dem Titelbild */
  .menuebreite:has(> .newsletter) { display: flex; flex-direction: column; padding-top: 14px; }
  .menuebreite > .newsletter { order: 9; margin-top: 8px; }
  .article { margin-bottom: 40px; background-color: rgba(255,255,255,.075); border-color: rgba(255,255,255,.15); border-top-color: rgba(255,255,255,.26); box-shadow: 0 12px 36px rgba(0,0,0,.40); }
  .article .blog-text, .article .blog-image { box-shadow: none; background: none; border: 0; }
}

/* Lesbarkeit auf hellen Bildern: Verlauf unten etwas hoeher, aber weich auslaufend */
.hero::after { height: 40%; background: linear-gradient(to top, rgba(31,24,32,.88) 0%, rgba(31,24,32,.58) 30%, rgba(31,24,32,.24) 66%, rgba(31,24,32,0) 100%); }
@media screen and (max-width: 760px) { .hero::after { height: 54%; } }

/* Newsletter naeher an den Panelen */
.newsletter { margin-bottom: 6px; }
.js-an .flexcontainer .halb.reveal:nth-child(2) { transition-delay: .15s; }

/* Als Web-App auf dem Home-Bildschirm: Inhalt reicht unter die Statusleiste, Kopf rutscht unter die Uhrzeit */
html, body { background-color: #1F1820; }
.mainheader, .mainheader[class] { margin-top: env(safe-area-inset-top, 0px); }
@media screen and (max-width: 760px) { .gaptop { padding-top: calc(205px + env(safe-area-inset-top, 0px)); } }
.textblock h2 { font-size: 20px; line-height: 28px; margin: 0; }
.kueche h2 { margin: 0 0 8px; }

/* Runde 10: Zitat eine Stufe groesser, "projekt:" vor dem Projektnamen */
.hero-spruch { max-width: 780px; }
.hero-spruch p { font-size: 38px; line-height: 45px; }
@media screen and (max-width: 1100px) { .hero-spruch p { font-size: 32px; line-height: 38px; } }
@media screen and (max-width: 760px) { .hero-spruch p { font-size: 28px; line-height: 34px; } }
.hero-label { opacity: .6; margin-right: -6px; }
.hero-rechts .hero-projekt-link, .hero-rechts a:not(.hero-alle) { margin-right: 4px; }

/* ===== Runde 11: Einleitung, Ablauf, Fragen, Anfrage (Stand 2026-10-24) ===== */
.einleitung, .anfrage, .schritt, .frage { display: block; color: #ccc; }
.einleitung, .anfrage { width: 100%; margin-bottom: 1em; }
.einleitung .textblock, .anfrage .textblock, .schritt .textblock, .frage .textblock {
  position: relative; overflow: hidden; padding: 24px 26px;
  background: rgba(255,255,255,.045);
  -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%);
  border: 1px solid rgba(255,255,255,.07); border-top-color: rgba(255,255,255,.15); border-left-color: rgba(255,255,255,.11);
  border-radius: 5px; box-shadow: 0 6px 24px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.07);
}
.einleitung .textblock::before, .anfrage .textblock::before, .schritt .textblock::before, .frage .textblock::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 58%, rgba(255,255,255,.026) 100%);
  background-size: 230% 100%; animation: lb-glanz 31s ease-in-out infinite alternate;
}
.frage:nth-child(2n) .textblock::before, .schritt:nth-child(2n) .textblock::before { animation-duration: 37s; animation-direction: alternate-reverse; }
.einleitung .textblock > *, .anfrage .textblock > *, .schritt .textblock > *, .frage .textblock > * { position: relative; z-index: 1; }
.einleitung h2, .anfrage h2 { margin: 0 0 10px; }
.einleitung p, .anfrage p { font-size: 18px; line-height: 27px; margin-bottom: .7em; }
.einleitung p.leise { color: #B0A489; margin-bottom: 0; }
h2.zwischen { color: #B0A489; font-weight: normal; font-size: 22px; line-height: 28px; margin: 34px 0 14px; }
.schritte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 1em; }
.fragen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 1em; }
.schritt .textblock, .frage .textblock { height: 100%; box-sizing: border-box; }
.schritt h3, .frage h3 { font-size: 18px; line-height: 24px; font-weight: normal; color: #B0A489; margin: 0 0 8px; }
.schritt .ziff { display: block; font-size: 13px; letter-spacing: .12em; color: #888; margin-bottom: 4px; }
.schritt p, .frage p { font-size: 16px; line-height: 24px; margin: 0; }
.js-an .schritt.reveal:nth-child(2), .js-an .frage.reveal:nth-child(2n) { transition-delay: .12s; }
.js-an .schritt.reveal:nth-child(3) { transition-delay: .24s; }
.js-an .schritt.reveal:nth-child(4) { transition-delay: .36s; }
.anfrage { margin-top: 1em; }
.anfrage-spalten { display: grid; grid-template-columns: 1.7fr 1fr; gap: 30px; margin-top: 16px; }
#anfrage-form input:not([type=checkbox]):not([type=submit]), #anfrage-form textarea {
  display: block; width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 8px 10px;
  background: #000; color: #ccc; border: 0; border-radius: 3px; font: inherit; font-size: 16px;
}
#anfrage-form textarea { resize: vertical; min-height: 110px; }
#anfrage-form input::placeholder, #anfrage-form textarea::placeholder { color: #888; }
#anfrage-form .haken { display: block; font-size: 16px; margin: 0 0 8px; cursor: pointer; }
#anfrage-form .haken input { margin-right: 8px; }
#anfrage-form .klein { font-size: 13px; line-height: 19px; color: #999; margin-bottom: 12px; }
#anfrage-form .klein a { color: #ccc; text-decoration: underline; }
#anfrage-form input[type=submit] { -webkit-appearance: none; appearance: none; cursor: pointer; background: #555; color: #B0A489; border: 0; border-radius: 3px; padding: 8px 22px; font: inherit; font-size: 16px; }
#anfrage-form input[type=submit]:hover { background: #666; }
.direkt p { font-size: 17px; line-height: 24px; margin-bottom: 12px; }
.direkt span { color: #B0A489; }
.direkt a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); }
.direkt a:hover { color: #B0A489; border-color: #B0A489; }
.direkt small { font-size: 14px; color: #999; }
.anfrage .antwort { font-size: 19px; line-height: 28px; color: #B0A489; }
@media screen and (max-width: 1100px) { .schritte { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 760px) {
  .fragen, .anfrage-spalten { grid-template-columns: 1fr; }
  .anfrage-spalten { gap: 14px; }
  .einleitung p, .anfrage p { font-size: 17px; line-height: 26px; }
  h2.zwischen { font-size: 20px; margin-top: 26px; }
}
@media screen and (max-width: 560px) { .schritte { grid-template-columns: 1fr; } .einleitung .textblock, .anfrage .textblock { padding: 20px; } }
@media (prefers-reduced-motion: reduce) { .einleitung .textblock::before, .anfrage .textblock::before, .schritt .textblock::before, .frage .textblock::before { animation: none; } }

/* ===== Runde 12 ===== */
/* Menue: kein Pixel-Rand mehr, nur die Glasflaeche */
/* Anfrage: Haken und Knopf in einer Zeile, Datenschutzhinweis ueber die volle Breite */
#anfrage-form .absenden { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
#anfrage-form .absenden .haken { margin: 0; }
.anfrage > .textblock > p.klein { font-size: 13px; line-height: 19px; color: #999; margin: 18px 0 0; max-width: none; }
.anfrage > .textblock > p.klein a { color: #ccc; text-decoration: underline; }
.anfrage-spalten { grid-template-columns: 1.5fr 1fr; }
@media screen and (max-width: 760px) { .anfrage-spalten { grid-template-columns: 1fr; } }

/* ===== Runde 13: Herz-Pille an der Oberkante der Grossbuchstaben; Flaechenlicht in allen Panelen ===== */
.hero-spruch p .hero-herz { top: -8px; }
@media screen and (max-width: 1100px) { .hero-spruch p .hero-herz { top: -4px; } }
@media screen and (max-width: 760px)  { .hero-spruch p .hero-herz { top: 0; } }

/* sehr langsames, weiches Licht wandert ueber die ganze Flaeche (nur transform: ruhig und sparsam) */
.halb .textblock::after, .kueche .textblock::after, .blog-text::after,
.einleitung .textblock::after, .anfrage .textblock::after, .schritt .textblock::after, .frage .textblock::after {
  content: ""; position: absolute; inset: -60%; border-radius: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.085) 0%, rgba(255,255,255,.04) 45%, rgba(255,255,255,0) 100%);
  animation: lb-licht 64s ease-in-out infinite alternate; will-change: transform;
}
.halb:nth-child(2) .textblock::after { animation-duration: 79s; animation-delay: -23s; }
.kueche .textblock::after { animation-duration: 71s; animation-delay: -31s; }
.einleitung .textblock::after { animation-duration: 83s; animation-delay: -12s; }
.anfrage .textblock::after { animation-duration: 74s; animation-delay: -40s; }
.schritt:nth-child(1) .textblock::after { animation-delay: -5s; }
.schritt:nth-child(2) .textblock::after { animation-duration: 72s; animation-delay: -27s; }
.schritt:nth-child(3) .textblock::after { animation-duration: 68s; animation-delay: -48s; }
.schritt:nth-child(4) .textblock::after { animation-duration: 77s; animation-delay: -15s; }
.frage:nth-child(2n) .textblock::after { animation-duration: 81s; animation-delay: -36s; }
.frage:nth-child(3n) .textblock::after { animation-duration: 69s; animation-delay: -19s; }
.frage:nth-child(5n) .textblock::after { animation-delay: -52s; }
@keyframes lb-licht { from { transform: translate3d(-16%, -9%, 0) scale(1); } to { transform: translate3d(16%, 9%, 0) scale(1.14); } }
@media (prefers-reduced-motion: reduce) {
  .halb .textblock::after, .kueche .textblock::after, .blog-text::after,
  .einleitung .textblock::after, .anfrage .textblock::after, .schritt .textblock::after, .frage .textblock::after { animation: none; }
}

/* ===== Runde 14: Kuechen-Panel mit Foto, Danke-Text allein ===== */
.kueche .textblock { display: flex; align-items: center; gap: 28px; }
.kueche .kueche-text { flex: 1 1 auto; min-width: 0; }
.kueche .kueche-bild { flex: 0 0 auto; width: 210px; height: 210px; object-fit: cover; border-radius: 3px; display: block; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
@media screen and (max-width: 760px) {
  .kueche .textblock { flex-direction: column; align-items: stretch; gap: 18px; }
  .kueche .kueche-bild { width: 100%; height: auto; aspect-ratio: 16 / 10; }
}
.anfrage .antwort { margin: 0; padding: 6px 0; }

/* ===== Runde 15: gleich breite Spalten, jede Flaeche mit eigenem Lichtweg ===== */
.schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fragen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media screen and (max-width: 1100px) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 760px) { .fragen { grid-template-columns: minmax(0, 1fr); } }
@media screen and (max-width: 560px) { .schritte { grid-template-columns: minmax(0, 1fr); } }
.halb .textblock::after, .kueche .textblock::after, .blog-text::after,
.einleitung .textblock::after, .anfrage .textblock::after, .schritt .textblock::after, .frage .textblock::after {
  animation: lb-licht var(--ld, 70s) ease-in-out var(--ldel, 0s) infinite alternate !important;
}
@keyframes lb-licht {
  from { transform: translate3d(var(--x0, -16%), var(--y0, -9%), 0) scale(var(--s0, 1)); }
  to   { transform: translate3d(var(--x1, 16%), var(--y1, 9%), 0) scale(var(--s1, 1.14)); }
}
@media (prefers-reduced-motion: reduce) {
  .halb .textblock::after, .kueche .textblock::after, .blog-text::after,
  .einleitung .textblock::after, .anfrage .textblock::after, .schritt .textblock::after, .frage .textblock::after { animation: none !important; }
}
.js-an .schritt.reveal { transition-delay: 0s !important; }
.textblock p.download a + br + a { display: inline-block; margin-top: 8px; }

/* Runde 17: aktiver Menuepunkt = hellere Glasflaeche (statt durchsichtig), kein Rand */
.menu-item.is-active, .menu-item.is-active:hover { background-color: rgba(255,255,255,.27) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ===== Runde 19: Menue-Glas mit verteiltem Licht; grosser Rueckruf-Haken; zwei Kacheln ===== */
.menu-item {
  overflow: hidden; background-color: rgba(255,255,255,.115);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.17), inset 0 1px 0 rgba(255,255,255,.30), inset 0 -10px 18px -12px rgba(255,255,255,.10);
}
.menu-item::after {
  content: ""; position: absolute; inset: -120% -60%; padding: 0; border-radius: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.30) 0%, rgba(255,255,255,.12) 50%, rgba(255,255,255,0) 100%);
  -webkit-mask: none; mask: none; background-size: auto; background-position: 0 0;
  animation: lb-licht var(--md, 46s) ease-in-out var(--mdel, 0s) infinite alternate;
  will-change: transform;
}
.menu-item.is-active { background-color: rgba(255,255,255,.22); }
@media (prefers-reduced-motion: reduce) { .menu-item::after { animation: none; } }

/* Rueckruf-Haken: so gross wie der Senden-Knopf, ganze Zeile klickbar */
#anfrage-form .haken { display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; font-size: 17px; }
#anfrage-form .haken input[type=checkbox] {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 44px; height: 44px; margin: 0; padding: 0;
  background: #000; border-radius: 3px; cursor: pointer; position: relative;
}
#anfrage-form .haken input[type=checkbox]:checked { background: #555; }
#anfrage-form .haken input[type=checkbox]:checked::after {
  content: ""; position: absolute; left: 15px; top: 7px; width: 12px; height: 22px;
  border: solid #B0A489; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
#anfrage-form .haken input[type=checkbox]:focus-visible { outline: 2px solid #B0A489; outline-offset: 2px; }
#anfrage-form input[type=submit] { height: 44px; padding: 0 24px; }

/* zwei Kacheln: Kueche (Bild rechts) und Lichtplanung (Bild links) */
.kueche.links .textblock { flex-direction: row-reverse; }
@media screen and (max-width: 760px) { .kueche.links .textblock { flex-direction: column; } }
@media screen and (max-width: 760px) { .kueche.links .kueche-bild { aspect-ratio: 1 / 1; max-width: 360px; width: 100%; margin: 0 auto; } }


/* ===== Runde 20: Menue-Glas ruhig und klar; Helligkeitsregler ===== */
/* ein gleichmaessiger, scharfer Rahmen (1 Geraetepixel), Licht nur sehr leise im Inneren */
.menu-item {
  background-color: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
}
.menu-item:hover { background-color: rgba(255,255,255,.18); }
.menu-item.is-active, .menu-item.is-active:hover { background-color: rgba(255,255,255,.26) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.60); }
.menu-item::after { background: radial-gradient(closest-side, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 55%, rgba(255,255,255,0) 100%); }
@media (min-resolution: 2dppx) { .menu-item, .menu-item.is-active { box-shadow: inset 0 0 0 .5px rgba(255,255,255,.55); } .menu-item.is-active { box-shadow: inset 0 0 0 .5px rgba(255,255,255,.85); } }

/* Runde 21: Schlusssatz der Einleitung in Ueberschriftgroesse */
.einleitung p.leise { font-size: 20px; line-height: 28px; margin-top: 4px; }

/* ===== Runde 21: Pop-up als Glas ===== 
   Aufbau: ::before = Glaskoerper (Weichzeichner, Saettigung, Randabdunklung, modellierter Rand, Kornstruktur)
           ::after  = Linsenrand (schmaler Ring, der das Dahinterliegende aufhellt und staerker faerbt) */
.projekt-fenster {
  position: relative; isolation: isolate; border-radius: 16px; padding: 26px;
  background: none; box-shadow: 0 18px 60px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.25);
}
.projekt-fenster::before, .projekt-fenster::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; }
.projekt-fenster::before {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.5'/></svg>"),
    linear-gradient(115deg, rgba(255,255,255,.00) 0%, rgba(255,255,255,.10) 18%, rgba(255,255,255,0) 34%, rgba(255,255,255,.05) 62%, rgba(255,255,255,0) 80%),
    linear-gradient(rgba(20,14,22,.16), rgba(20,14,22,.16)),
    radial-gradient(ellipse 85% 85% at 50% 42%, rgba(255,255,255,.13) 0%, rgba(255,255,255,.07) 55%, rgba(18,12,20,.34) 100%);
  background-size: 220px 220px, 100% 100%, 100% 100%, 100% 100%;
  -webkit-backdrop-filter: blur(22px) saturate(150%) brightness(1.04); backdrop-filter: blur(22px) saturate(150%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    inset 1px 0 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 0 16px 2px rgba(255,255,255,.16),
    inset 0 0 80px 8px rgba(0,0,0,.30);
}
.projekt-fenster::after {
  padding: 7px;
  background: linear-gradient(140deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.06) 30%, rgba(255,255,255,.0) 55%, rgba(255,255,255,.16) 100%);
  -webkit-backdrop-filter: blur(1.5px) brightness(1.55) saturate(1.9); backdrop-filter: blur(1.5px) brightness(1.55) saturate(1.9);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) exclude, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: .85;
}
.projekt-fenster .button {
  background-color: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.18), 0 4px 14px rgba(0,0,0,.3);
}
.projekt-fenster .button:hover { background-color: rgba(255,255,255,.24); }
#abdunklung { background-color: rgba(10,8,12,.50); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .projekt-fenster::before { background-color: rgba(52,46,56,.96); }
}
@media (prefers-reduced-transparency: reduce) { .projekt-fenster::before { background-color: rgba(52,46,56,.97); -webkit-backdrop-filter: none; backdrop-filter: none; } .projekt-fenster::after { display: none; } }
@media screen and (max-width: 560px) { .projekt-fenster { border-radius: 0; padding: 20px; } .projekt-fenster::before, .projekt-fenster::after { border-radius: 0; } }

/* ===== Runde 22: Hersteller-Pop-up ===== */
.projekt-fenster .gallery { position: relative; }
.projekt-fenster .gallery figure { width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; margin: 0; }
.projekt-fenster .gallery figure img { width: 100%; height: 100%; object-fit: cover; }
.projekt-fenster .gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 38px 16px 12px; font-size: 14px; line-height: 19px; color: #fff;
  background: linear-gradient(rgba(10,8,12,0), rgba(10,8,12,.74)); pointer-events: none;
}
.projekt-fenster .gallery-buttons figure { border-radius: 6px; overflow: hidden; transition: box-shadow .25s ease; outline: none; }
.projekt-fenster .gallery-buttons figure.aktiv { box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.projekt-fenster .gallery-buttons figure:focus-visible, .projekt-fenster .button:focus-visible { box-shadow: 0 0 0 3px #fff; }
.projekt-fenster .gallery { border-radius: 10px; }
.hersteller-hinweis span { display: block; color: #B0A489; line-height: 24px; margin-bottom: 4px; }
.hersteller-web {
  display: inline-block; margin: 8px 0 4px; padding: 9px 18px; border-radius: 10px; color: #fff; text-decoration: none; font-size: 17px; line-height: 24px;
  background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.22), 0 4px 14px rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .25s ease;
}
.hersteller-web:hover { background: rgba(255,255,255,.26); }
.hersteller-web:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.projekt-fenster .projekt-text p { margin: 0 0 .6em; }
@media screen and (max-width: 760px) {
  .projekt-fenster .gallery { height: auto; aspect-ratio: 1 / 1; }
  .projekt-fenster .gallery figure { position: absolute; }
}
.hersteller-web span { display: inline !important; margin: 0 !important; }
.hersteller-web .nur-lesbar { display: block !important; }
.hersteller-hinweis span { color: #D8CBA8; }

/* ===== Runde 23: Pop-up bleibt an Ort und Stelle, blendet sanft ein, blaettert; Feinschliff ===== */
#abdunklung, .js-an #abdunklung {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto !important; margin: 0 !important; padding: 0 !important;
  z-index: 400; display: block !important; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background-color: rgba(10,8,12,.52); transition: background-color 1s cubic-bezier(.22,.61,.36,1), visibility 0s linear 1s;
}
.js-an #abdunklung { background-color: rgba(10,8,12,0); visibility: hidden; pointer-events: none; }
.js-an #abdunklung.offen { background-color: rgba(10,8,12,.52); visibility: visible; pointer-events: auto; transition-delay: 0s; }
#abdunklung .projekt-fenster { margin: 6vh auto 6vh !important; top: auto; transition: box-shadow 1s ease; }
.js-an #abdunklung .projekt-fenster { box-shadow: 0 0 0 rgba(0,0,0,0); }
.js-an #abdunklung.offen .projekt-fenster { box-shadow: 0 18px 60px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.25); }
/* Glas selbst und Inhalt blenden getrennt ein, damit der Weichzeichner nie aussetzt */
.js-an #abdunklung .projekt-fenster::before, .js-an #abdunklung .projekt-fenster::after { opacity: 0; transition: opacity 1.1s cubic-bezier(.22,.61,.36,1); }
.js-an #abdunklung.offen .projekt-fenster::before { opacity: 1; }
.js-an #abdunklung.offen .projekt-fenster::after { opacity: .85; }
/* Inhalt als eine Einheit: beim Blaettern blendet alles gemeinsam aus und wieder ein */
.projekt-fenster > .inhalt { display: flow-root; }
.js-an #abdunklung .projekt-fenster > .inhalt { opacity: 0; transition: opacity .9s ease .25s; }
.js-an #abdunklung.offen .projekt-fenster > .inhalt { opacity: 1; }
.js-an #abdunklung .projekt-fenster > .inhalt > .links, .js-an #abdunklung .projekt-fenster > .inhalt > .rechts, .js-an #abdunklung .projekt-fenster > .inhalt > .button {
  transform: translateY(12px); transition: transform 1.1s cubic-bezier(.22,.61,.36,1) .2s;
}
.js-an #abdunklung.offen .projekt-fenster > .inhalt > .links, .js-an #abdunklung.offen .projekt-fenster > .inhalt > .rechts, .js-an #abdunklung.offen .projekt-fenster > .inhalt > .button { transform: none; }
.js-an #abdunklung .projekt-fenster.wechsel > .inhalt { opacity: 0; transition: opacity .22s ease; }
.js-an #abdunklung .projekt-fenster.wechsel > .inhalt > .links, .js-an #abdunklung .projekt-fenster.wechsel > .inhalt > .rechts, .js-an #abdunklung .projekt-fenster.wechsel > .inhalt > .button { transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  #abdunklung, #abdunklung * , #abdunklung .projekt-fenster::before, #abdunklung .projekt-fenster::after { transition-duration: .01s !important; transition-delay: 0s !important; }
}
/* Pfeile zum Weiterschauen */
#abdunklung .pfeil {
  position: fixed; top: 50%; margin-top: -28px; width: 56px; height: 56px; border-radius: 28px; border: 0; padding: 0 0 5px; cursor: pointer; color: #fff; font-size: 38px; line-height: 56px; font-family: inherit;
  background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.2), 0 4px 16px rgba(0,0,0,.32);
  opacity: 0; transition: opacity .9s ease .5s, background-color .25s ease; z-index: 3;
}
#abdunklung.offen .pfeil { opacity: 1; }
#abdunklung .pfeil:hover { background: rgba(255,255,255,.26); }
#abdunklung .pfeil:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#abdunklung .pfeil-l { left: max(10px, calc(50% - 560px)); }
#abdunklung .pfeil-r { right: max(10px, calc(50% - 560px)); }
@media screen and (max-width: 1180px) { #abdunklung .pfeil-l { left: 8px; } #abdunklung .pfeil-r { right: 8px; } }
@media screen and (max-width: 760px) { #abdunklung .pfeil { top: auto; bottom: 14px; margin-top: 0; width: 46px; height: 46px; border-radius: 23px; font-size: 32px; line-height: 46px; } }

/* Glaskanten etwas schaerfer */
.projekt-fenster { border-radius: 9px; }
.projekt-fenster .gallery { border-radius: 5px; }
.projekt-fenster .gallery-buttons figure { border-radius: 3px; }
.hersteller-web { border-radius: 7px; }
.projekt-fenster .button { border-radius: 50%; }
@media screen and (max-width: 560px) { .projekt-fenster { border-radius: 0; } }

/* Bildlegende unter dem grossen Bild; Hinweis, Knopf, Nachweis */
.projekt-fenster .gallery figcaption { display: none; }
.bildlegende { float: left; clear: left; width: 450px; margin: 9px 0 0; font-size: 14px; line-height: 19px; color: rgba(255,255,255,.88); min-height: 19px; }
.gallery-buttons { margin-top: 0; }
.hersteller-hinweis span { font-size: 17px; line-height: 21px; margin-bottom: 2px; }
.hersteller-web {
  display: inline-flex; align-items: center; gap: .45em; margin: 12px 0 4px; padding: 13px 20px 10px; line-height: 1.1;
}
.hersteller-web span[aria-hidden] { position: relative; top: 1px; }
.projekt-info .bildnachweis-h { display: block; margin-top: 16px; font-size: 12.5px; line-height: 17px; letter-spacing: .02em; color: rgba(255,255,255,.4); }
@media screen and (max-width: 1100px) { .bildlegende { width: 320px; } }
@media screen and (max-width: 760px) { .bildlegende { width: 100%; float: none; } }

/* abgelaufen: kleine Glas-Marke oben rechts, nichts wird abgedunkelt */
.article.abgelaufen .blog-image img { filter: none; opacity: 1; }
.article.abgelaufen .blog-text .text { opacity: 1; }
.blog-text { position: relative; }
.abgelaufen-marke {
  position: absolute; top: 0; right: 22px; margin: 0; padding: 4px 12px 5px; border: 0; border-radius: 0 0 6px 6px;
  font-size: 12px; line-height: 16px; letter-spacing: .09em; color: rgba(255,255,255,.62);
  background: linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.12));
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.28), inset 1px 0 0 rgba(255,255,255,.12), inset -1px 0 0 rgba(255,255,255,.12), inset 0 3px 7px rgba(0,0,0,.35);
}

/* Kontakt: Glaskacheln, Ueberschrift und Text mit Abstand, Karte mit leuchtender Marke */
.halb .textblock h1 { font-size: 20px; line-height: 28px; margin: 0 0 12px; color: #B0A489; font-weight: normal; }
.halb .textblock p { margin-bottom: 14px; }
.halb .textblock p:last-child { margin-bottom: 0; }
.halb .textblock a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); }
.karte { position: relative; display: block; }
.karte-marke {
  position: absolute; left: 40.7%; top: 39.2%; width: 11%; height: 9.6%; border-radius: 7px; pointer-events: none; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.07) 55%, rgba(255,255,255,.16));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 0 0 1px rgba(255,255,255,.28), inset 0 0 16px rgba(255,255,255,.18), 0 0 26px rgba(255,255,255,.2), 0 0 70px rgba(255,120,30,.22);
  animation: lb-marke 7s ease-in-out infinite alternate;
}
.karte-marke::before {
  content: ""; position: absolute; inset: -60% -40%; background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0));
  animation: lb-licht 9s ease-in-out infinite alternate; opacity: .6;
}
@keyframes lb-marke { from { box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 0 0 1px rgba(255,255,255,.28), inset 0 0 16px rgba(255,255,255,.14), 0 0 20px rgba(255,255,255,.14), 0 0 50px rgba(255,120,30,.14); }
  to { box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 1px rgba(255,255,255,.4), inset 0 0 22px rgba(255,255,255,.26), 0 0 34px rgba(255,255,255,.3), 0 0 90px rgba(255,120,30,.34); } }
@media (prefers-reduced-motion: reduce) { .karte-marke, .karte-marke::before { animation: none; } }

.projekt-fenster, .bildlegende { font-kerning: none; font-feature-settings: 'kern' 0; }
/* abgelaufen-Tag: eigener Platz ueber der Ueberschrift, keine Ueberlagerung */
.article.abgelaufen .article-header { position: relative; padding-top: 22px; }
.article.abgelaufen .abgelaufen-marke { top: -14px; right: 0; }

/* ===== Runde 24: einheitliches Schliessen-Kreuz, Grossansicht ===== */
.projekt-fenster .button:before, .projekt-fenster .button:after { content: none !important; }
.projekt-fenster .button, .lupe-zu {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M17 17L43 43M43 17L17 43' stroke='%23fff' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 100% 100%; cursor: pointer;
}
.projekt-fenster .gallery figure.aktiv { cursor: zoom-in; }
#lupe { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(8,6,10,.9); opacity: 0; transition: opacity .35s ease; cursor: zoom-out; }
#lupe.offen { opacity: 1; }
#lupe img { max-width: 92vw; max-height: 92vh; width: auto; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.6); cursor: default; }
.lupe-zu { position: absolute; top: 20px; right: 24px; width: 54px; height: 54px; border: 0; border-radius: 50%; background-color: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.18); }
.lupe-zu:hover { background-color: rgba(255,255,255,.26); }
.lupe-zu:focus-visible { box-shadow: 0 0 0 3px #fff; outline: none; }
#lupe img { width: min(92vh, 92vw); height: min(92vh, 92vw); max-width: none; max-height: none; object-fit: cover; }

/* ===== Runde 24b: Feinschliff Pop-ups, 360-Rahmen, Karte ===== */
/* 360-Grad-Seite im Glasrahmen */
.rahmen-360 { padding: 14px; margin-bottom: 30px; }
.rahmen-360 iframe { display: block; border: 0; border-radius: 4px; }

/* Pop-up: Legende exakt so breit wie das Bild, mehr Luft zu den Vorschaubildern */
.bildlegende { width: 450px; margin: 12px 0 0; padding-right: 4px; box-sizing: border-box; }
@media screen and (max-width: 1300px) { .bildlegende { width: 320px; } }
@media screen and (max-width: 1100px) { .bildlegende { width: 280px; } }
@media screen and (max-width: 760px) { .bildlegende { width: 100%; float: none; } }
.projekt-fenster .gallery-buttons { margin-top: 14px; }
.projekt-fenster .bildlegende + .gallery-buttons { margin-top: 22px; }

/* grosses Bild liegt als Foto auf dem Glas */
.projekt-fenster .gallery { box-shadow: 0 14px 30px rgba(0,0,0,.42), 0 3px 8px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.06); }
.projekt-fenster .gallery.gallery { overflow: hidden; }

/* aktives Vorschaubild: Glasrahmen statt weisser Linie */
.projekt-fenster .gallery-buttons figure { overflow: visible; position: relative; border-radius: 4px; }
.projekt-fenster .gallery-buttons figure img { border-radius: 4px; display: block; }
.projekt-fenster .gallery-buttons figure.aktiv { box-shadow: none; }
.projekt-fenster .gallery-buttons figure.aktiv::after {
  content: ""; position: absolute; inset: -6px; padding: 5px; border-radius: 9px; box-sizing: border-box; pointer-events: none;
  background: linear-gradient(145deg, rgba(255,255,255,.7), rgba(255,255,255,.26) 45%, rgba(255,255,255,.5));
  border: 1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(3px) brightness(1.5) saturate(1.5); backdrop-filter: blur(3px) brightness(1.5) saturate(1.5);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) exclude, linear-gradient(#000 0 0); mask-composite: exclude;
}
.projekt-fenster .gallery-buttons figure:focus-visible { box-shadow: none; }

/* Schliessen-Kreuz: Fokusring nur bei Tastatur (Tab), nie nach Mausklick oder Pfeiltasten */
.projekt-fenster .button:focus-visible, .lupe-zu:focus-visible { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.18), 0 4px 14px rgba(0,0,0,.3); outline: none; }
.tastatur .projekt-fenster .button:focus-visible, .tastatur .lupe-zu:focus-visible { outline: 2px solid rgba(255,255,255,.85); outline-offset: 2px; }
.tastatur .projekt-fenster .gallery-buttons figure:focus-visible::after { content: ""; position: absolute; inset: -4px; border: 2px solid rgba(255,255,255,.85); border-radius: 8px; }

/* Bildnachweis unter den Bildern, links, leise */
.projekt-fenster .links .bildnachweis-h { float: left; clear: left; width: 100%; margin: 16px 0 0; font-size: 12px; line-height: 17px; letter-spacing: .02em; color: rgba(255,255,255,.4); }

/* Textabsaetze mit Luft */
.projekt-fenster .projekt-text p { margin: 0 0 1em; }
.projekt-fenster .projekt-text p:last-child { margin-bottom: 0; }
.projekt-fenster .projekt-text p.vorspann { color: #D8CBA8; margin-bottom: .8em; }

/* Karte: schmaleres, hoeheres Glasschild unter der Strasse, grosse 43 */
.karte { container-type: inline-size; }
.karte-marke {
  left: 41.9%; top: 41.4%; width: 8.6%; height: 18.6%; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5cqw;
}
.karte-marke b { position: relative; z-index: 1; font-size: 3.3cqw; line-height: 1; font-weight: bold; color: #fff; letter-spacing: .01em; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.karte-marke img { position: relative; z-index: 1; width: 74%; height: auto; display: block; }

/* ===== Runde 25 ===== */
/* Anfrage-Panel: kurz, eindeutig, nichts muss ausgefuellt werden ausser einer Erreichbarkeit */
.anfrage .anfrage-spalten { grid-template-columns: 1.55fr 1fr; gap: 38px; margin-top: 0; align-items: start; }
.anfrage h2 { font-size: 24px; line-height: 30px; margin: 0 0 16px; color: #B0A489; font-weight: normal; }
#anfrage-form textarea, #anfrage-form input:not([type=checkbox]):not([type=submit]) {
  display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 14px 16px; font: inherit; font-size: 17px; line-height: 24px; color: #fff;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.17); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
#anfrage-form textarea { min-height: 96px; resize: vertical; margin-bottom: 12px; }
#anfrage-form input::placeholder, #anfrage-form textarea::placeholder { color: rgba(255,255,255,.5); }
#anfrage-form textarea:focus, #anfrage-form input:focus { outline: none; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.11); box-shadow: 0 0 0 3px rgba(176,164,137,.28); }
.feldzeile { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
#anfrage-form .absenden { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.schalter { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; font-size: 16px; color: rgba(255,255,255,.82); position: relative; }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter .schiene { width: 42px; height: 24px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); position: relative; transition: background-color .25s ease; flex: 0 0 auto; }
.schalter .schiene::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: transform .25s ease; }
.schalter input:checked + .schiene { background: rgba(176,164,137,.7); }
.schalter input:checked + .schiene::after { transform: translateX(18px); }
.schalter input:focus-visible + .schiene { outline: 2px solid #fff; outline-offset: 2px; }
.knopf-senden, .aktion {
  -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; font: inherit; color: #fff;
  background: linear-gradient(rgba(255,255,255,.24), rgba(255,255,255,.1)); border: 1px solid rgba(255,255,255,.38); border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 18px rgba(0,0,0,.28); transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}
.knopf-senden { padding: 13px 26px 12px; font-size: 18px; }
.knopf-senden span { transition: transform .2s ease; }
.knopf-senden:hover, .aktion:hover { background: linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.16)); border-color: rgba(255,255,255,.6); transform: translateY(-1px); }
.knopf-senden:hover span { transform: translateX(3px); }
.knopf-senden:focus-visible, .aktion:focus-visible, .anruf:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.direkt { display: flex; flex-direction: column; gap: 12px; }
.direkt h2 { margin-bottom: 4px; }
.direkt a.anruf {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(rgba(255,255,255,.13), rgba(255,255,255,.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 14px rgba(0,0,0,.22);
  transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}
.direkt a.anruf:hover { background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.1)); border-color: rgba(255,255,255,.5); transform: translateY(-1px); color: #fff; }
.anruf svg { width: 24px; height: 24px; flex: 0 0 auto; fill: #D8CBA8; }
.anruf-text { flex: 1 1 auto; min-width: 0; }
.anruf-text b { display: block; font-size: 21px; line-height: 26px; font-weight: bold; letter-spacing: .01em; }
.anruf-text small { display: block; font-size: 14px; line-height: 19px; color: rgba(255,255,255,.62); }
.anruf .weiter { font-size: 30px; line-height: 1; color: rgba(255,255,255,.55); transition: transform .2s ease, color .2s ease; }
.anruf:hover .weiter { transform: translateX(3px); color: #fff; }
.mailknopf .anruf-text b { font-size: 18px; font-weight: normal; }
@media screen and (max-width: 760px) { .anfrage .anfrage-spalten { grid-template-columns: 1fr; gap: 26px; } .feldzeile { grid-template-columns: 1fr; } #anfrage-form .absenden { justify-content: flex-start; } }

/* 360 Grad: Rahmen passt in das Fenster, kein Scrollen noetig */
@media screen and (min-width: 761px) {
  .seite-360 { --kopf-360: 192px; padding-top: var(--kopf-360); }
  .seite-360 .rahmen-360 { margin-bottom: 0; }
  .seite-360 .rahmen-360 iframe { height: calc(100vh - var(--kopf-360) - 28px - 35px - 22px); min-height: 340px; }
}
@media screen and (min-width: 761px) and (max-width: 1300px) { .seite-360 { --kopf-360: 172px; } }
@media screen and (min-width: 761px) and (max-width: 1100px) { .seite-360 { --kopf-360: 156px; } }
.rahmen-360 { position: relative; }
.vollbild {
  position: absolute; top: 24px; right: 24px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 7px; font: inherit; font-size: 14px; color: #fff; cursor: pointer;
  background: rgba(30,24,32,.55); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 14px rgba(0,0,0,.3);
}
.vollbild:hover { background: rgba(60,50,64,.7); }
.vollbild svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; }

/* Lageplan: Bild beschnitten, Glasschild nur um das Logo, Wegbeschreibung zum Anklicken */
.ganz.wege { margin-top: 6px; margin-bottom: 0; }
.wege-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.aktion { padding: 11px 20px 10px; font-size: 16px; }
.aktion svg { width: 19px; height: 19px; fill: #D8CBA8; flex: 0 0 auto; }
.strassenansicht { margin-top: 14px; }
.strassenansicht[hidden] { display: none; }
.strassenansicht iframe { display: block; width: 100%; height: 440px; border: 0; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.strassenansicht p.klein { font-size: 13px; line-height: 19px; color: #999; margin: 8px 2px 0; }
.strassenansicht p.klein a { color: #ccc; text-decoration: underline; }
.ganz.karte { margin-top: 10px; }
.karte-bild { position: relative; }
.karte-bild img { display: block; width: 100%; height: auto; object-fit: fill; }
.karte-marke { display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.karte-marke img { position: relative; z-index: 1; width: 76%; height: auto; display: block; }

/* Pop-up: ruhigere Typografie */
.projekt-fenster .gallery { box-shadow: 0 5px 14px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.12); }
.bildlegende { min-height: 38px; margin-top: 14px; text-wrap: pretty; }
.projekt-fenster .projekt-text p { margin: 0 0 .55em; text-wrap: pretty; }
.projekt-fenster .projekt-text p.vorspann { margin-bottom: .6em; }
.hersteller-hinweis { margin-top: 20px !important; }
.projekt-fenster .rechts .bildnachweis-h { display: block; margin: 20px 0 0; font-size: 12px; line-height: 17px; letter-spacing: .02em; color: rgba(255,255,255,.4); }
.projekt-fenster .rechts .projekt-info:has(.bildnachweis-h) { margin-top: 0; }
@media screen and (max-width: 760px) { .projekt-fenster .gallery-buttons { margin-top: 12px; } .bildlegende { min-height: 0; margin-bottom: 0; } .projekt-fenster .rechts { padding-left: 0; margin-top: 22px; } }
@media screen and (max-width: 760px) { .projekt-fenster .gallery-buttons { margin-top: 6px; } .projekt-fenster .gallery-buttons figure { margin-top: 0; } }

/* Runde 25b */
/* Verlaufsband nur nach dem Scrollen: oben bleibt alles unabgedunkelt */
html:not(.gescrollt) .panorama-verlauf { opacity: 0; }
/* 360 Grad: Seite wird nicht gescrollt, Rahmen sitzt dicht unter dem Menue */
@media screen and (min-width: 761px) {
  html.seite-360-an, html.seite-360-an body { overflow: hidden; height: 100%; }
  .seite-360 { padding-top: var(--kopf-360, 150px); }
  .seite-360 .rahmen-360 iframe { height: var(--hoehe-360, 420px); min-height: 0; }
}