#spiegelsaal .spiegel-nag{
  display: block;
  font-size: 14px;
  text-align: left;
  background-color: #fff;
  height: 40px;
  -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
  margin-bottom: 10px;
}
#spiegelsaal .spiegel-nag:hover{
  -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.4);
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.3);
}
#spiegelsaal .spiegel-nag > .spiegel-split{
  float: left;
  color: #000;
  height: 100%;
  text-align: center;
  padding-top: 10px;
  width: 40px;
}
#spiegelsaal .spiegel-nag > .spiegel-text{
  line-height: 19px;
  padding-top: 11px;
  padding-left: 45px;
  padding-right: 20px;
}
.spiegelsaal-text {
  padding: 1rem;
  text-align: center;
  font-size: 1.5rem;
  margin: 0 auto;
  border-radius: 7px;
}

p.spiegelsaal-text a {
  color: #000;
}

.startbox .spiegelsaal-text {
    font-size: 1rem;
}

div.spiegelsaal {
  margin-bottom: 3rem;
}
.spiegelsaal-footer {
  border-bottom:1px solid #999;
  padding:10px 0
}
div.spiegelbox {
  position:relative;
  min-width:250px;
  padding:25px;
  margin:0 auto 40px;
  text-align:center;
  font-size:16px;
  background:#f4d416 no-repeat 0 50%;
}
div.mirror_hacienda {
  padding: 1.5rem;

  background: repeating-linear-gradient(
                  -45deg,
                  #f2a417,
                  #f2a417 15px,
                  #141617 15px,
                  #141617 30px
  );
}
div.mirror_hacienda p.spiegelsaal-text {
  padding: 1rem;

  background: white;
}
div.mirror_sketchy {
  padding: 1rem 2rem;
  display: inline-block;
  border: 3px solid #333333;
  border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;
  background: #ffffff;
  position: relative;
}
div.mirror_sketchy::before {
  content: '';
  border: 2px solid #353535;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
  border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%;
}
div.mirror_sketchy p.spiegelsaal-text {
  padding: 1rem;
  background: transparent;
}
div.mirror_one {
  display:inline-block;
  width:100%;
  margin:5% auto;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  padding:1em;
  line-height:1.5em;
  background:hsla(67, 95%, 95%, 1);
  border:solid 5px #C36;
}
div.mirror_one p.spiegelsaal-text {
  background:hsla(67, 95%, 95%, 1);
}

div.mirror_cartoon {
  margin:25px;
  background:#fff;
  border: solid black;
  border-width: 3px 3px 5px 5px;
  border-radius:4% 95% 6% 95%/95% 4% 92% 5%;
  transform: rotate(-2deg);
}
div.mirror_cartoon p.spiegelsaal-text {
  padding: 2rem;
  background:transparent;
}
div.mirror_cartoon .slogan{
  transform: rotate(2deg);
  margin:15px;
  padding:0 5px;
  float:right;
  background:#ddd;
  border:1px solid #222;
  box-shadow:3px 3px 0 #222;
}
div.mirror_frame {
  border: 25px solid #C36;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='75'%3E%3Cg fill='none' stroke='%23B88846' stroke-width='2'%3E%3Cpath d='M1 1h73v73H1z'/%3E%3Cpath d='M8 8h59v59H8z'/%3E%3Cpath d='M8 8h16v16H8zM51 8h16v16H51zM51 51h16v16H51zM8 51h16v16H8z'/%3E%3C/g%3E%3Cg fill='%23B88846'%3E%3Ccircle cx='16' cy='16' r='2'/%3E%3Ccircle cx='59' cy='16' r='2'/%3E%3Ccircle cx='59' cy='59' r='2'/%3E%3Ccircle cx='16' cy='59' r='2'/%3E%3C/g%3E%3C/svg%3E") 25;
}
div.mirror_frame p.spiegelsaal-text {
  background:transparent;
}

div.spiegelbox:before {
  content:""; position:absolute; top:0; right:0; border-width:20px; border-style:solid;
  border-color:#fff #fff #debc08 #debc08;
}
div.spiegelbox:after {
  position:absolute; bottom:5px; right:5px; width:15%;
  height:40px; padding-left:60px; text-align:right;
}
div.spiegelbox.blue {
  background-color: #0e90d2;
}
div.spiegelbox img {
  max-width:100%;
}
div.mirror_soccer p {
  background: url("images/mirror/bg_grass-KjUOyMY.jpg");
  color: #FFF;
}
div.mirror_bricks p.spiegelsaal-text {
  background: url("images/mirror/bg_bricks-tLTbcvC.jpg");
  color: #FFF;
}
div.mirror_nightsky p.spiegelsaal-text {
  background: url("images/mirror/bg_nightsky-frPy9PQ.jpg");
  color: #FFF;
}
div.mirror_redwall p.spiegelsaal-text {
  background: url("images/mirror/bg_redwall-DhMOHTf.jpg");
  color: #000;
}
div.mirror_books p.spiegelsaal-text {
  background: url("images/mirror/books-Oz0eQ8G.jpg");
  color: #000;
}
div.mirror_broody p.spiegelsaal-text {
  background: url("images/mirror/broody-fLzc97n.jpg");
  color: #000;
}
div.mirror_clouds  p.spiegelsaal-text {
  background: url("images/mirror/clouds-ajtNzff.jpg");
}
div.mirror_color_paint  p.spiegelsaal-text {
  background: url("images/mirror/color_paint-VKEB6V0.jpg");
  color: #000;
}
div.mirror_konfetti  p.spiegelsaal-text {
  background: url("images/mirror/konfetti-y2iKauY.jpg");
  color: #FFF;
}
div.mirror_raufaser  p.spiegelsaal-text {
  background: url("images/mirror/raufaser-Fpik8po.jpg");
  color: #000;
}
div.mirror_red_fog  p.spiegelsaal-text {
  background: url("images/mirror/red_fog-CiN6Kd4.jpg");
  color: #000;
}
div.mirror_red_pinsels  p.spiegelsaal-text {
  background: url("images/mirror/red_pinsels-yY4z6Ao.jpg");
  color: #fff;
}
div.mirror_red_stifte p.spiegelsaal-text {
  background: url("images/mirror/stifte-C-yVRQI.jpg");
  color: #000;
}
div.mirror_unfinished_wall p.spiegelsaal-text {
  background: url("images/mirror/unfinished_wall-vRX44oZ.jpg");
  color: #ccc;
}
div.mirror_violet_field p.spiegelsaal-text {
  background: url("images/mirror/violet_field-EDjEFdf.jpg");
  color: #000;
}
div.mirror_we_are_water p.spiegelsaal-text {
  background: url("images/mirror/we_are_water-2BxHG13.jpg");
  color: #000;
}
div.mirror_yellow_wall_girl p.spiegelsaal-text {
  background: url("images/mirror/yellow_wall_girl-FXOGLxV.jpg") bottom 0 right 7px;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  color: #000;
}
div.mirror_soccer p a,
div.mirror_bricks p.spiegelsaal-text a,
div.mirror_nightsky p.spiegelsaal-text a,
div.mirror_konfetti p.spiegelsaal-text a,
div.mirror_red_pinsels p.spiegelsaal-text a
{
  color: #FFF;
}
div.mirror_unfinished_wall p.spiegelsaal-text a
{
  color: #CCC;
}

div.startbox div.mirror {
  border: 2px solid #222;
  padding: 0;
  background-color: #FFF;
}
div.startbox div.mirror div.mirror-content {
  padding: 2px;
  background-color: #FFFFE0;
  border: 1px solid #555;
  display: table-cell;
  vertical-align:middle;
}

#startseite #spiegelsaal img {
  background: transparent;
  border: 3px solid transparent;
  margin-bottom: 3px;
}

#startseite #spiegelsaal img:hover {
  border: 3px solid #C36;
}

.mirror-box {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fff;
}

.mirror-navbar {
  height: 10vh;
  background-color: white;
  padding: 20px;
  border-bottom:2px solid #c36;
}

.main {
  display: flex;
  flex:1;
  height: 90vh;
}

.lefty {
  flex:1;
  display: flex;
  background-color: #f0f0f0;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.lefty img, .center-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.right {
  flex:2;
  background-color: #ffffff;
  padding: 20px;
  overflow-y: auto;
}

.main.centered {
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
}

.center-box {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.center-box p {
  font-size: clamp(1rem, 5vw, 4rem); /* Skaliert gut mit der Fenstergröße */
  line-height: 1.2;
}
.right p {
  font-size: 2rem;
  line-height: 1.2;
}

/* 🔁 Responsive Anpassung ab 800px Breite */
@media (max-width: 800px) {
  .main {
    flex-direction: column;
  }

  .lefty {
    width: 100%;
    height: 60%;
  }

  .right {
    width: 100%;
    height: 40%;
  }
}