@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: 30; 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: 106%; 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(-5.6%); } }

.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 {
  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 {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  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: 38s; }
.article .blog-text::before { animation-duration: 41s; }
@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 38s 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; } }
.navigation a:nth-child(2) .menu-item::after { animation-duration: 47s; animation-direction: alternate-reverse; }
.navigation a:nth-child(3) .menu-item::after { animation-duration: 41s; animation-delay: -7s; }
.navigation a:nth-child(4) .menu-item::after { animation-duration: 52s; animation-direction: alternate-reverse; animation-delay: -4s; }
.navigation a:nth-child(5) .menu-item::after { animation-duration: 43s; animation-delay: -11s; }
.navigation a:nth-child(6) .menu-item::after { animation-duration: 49s; animation-direction: alternate-reverse; animation-delay: -15s; }
@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)); }
.branding .logo img { filter: drop-shadow(0 1px 10px rgba(0,0,0,.35)); }
.branding .datum { text-shadow: 0 1px 8px rgba(0,0,0,.5); }
@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: 40%; background: linear-gradient(to top, rgba(31,24,32,.86), rgba(31,24,32,.34) 52%, rgba(31,24,32,0)); }
@media screen and (max-width: 760px) { .hero::after { height: 56%; } }
.hero-spruch { text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 2px 18px rgba(0,0,0,.6); }
.hero-folie img { filter: brightness(1.07) saturate(1.1); }
.hero-bilder::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: screen;
  background: radial-gradient(70% 90% at 72% 18%, rgba(255,240,215,.20), rgba(255,240,215,0) 62%);
  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; } }

/* Logo: leuchtet auch auf rotbraunem Grund */
.branding .logo { position: relative; }
.branding .logo::before {
  content: ""; position: absolute; left: -9%; right: -9%; top: -30%; bottom: -30%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(16,12,18,.42), rgba(16,12,18,0));
}
.branding .logo img { filter: drop-shadow(0 0 2px rgba(0,0,0,.35)) drop-shadow(0 1px 12px rgba(0,0,0,.45)); position: relative; }