/* ==================================================
   Werkstatt Theme-Skin (werkstatt.css)
   ================================================== */

html {
  background: transparent;
}

body {
  background: #3d3a33 url(images/tisch2.jpg) repeat;
  background-attachment: fixed;
  background-size: auto;
}

#wrapper {
  background: rgba(255, 255, 255, 0.88);
}

/* Transparente Header- & Footer-Bereiche */
#header .inner,
#content,
#footer,
#footer .inner {
  background: transparent;
}

#header {
  border-top: 10px solid rgba(0, 0, 0, 0.2);
}

#header #logo a,
#header #logo a:hover {
  background: rgba(255, 255, 255, 0.85);
}

/* Mobile Menü-Button */
#mobile {
  color: #fff;
}
#mobile b {
  border-color: #fff;
}

/* Zitate */
blockquote {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
}

/* Sidebarmenü Anpassungen */
#sidebarmenue ul li a {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
}

#sidebarmenue ul li a:hover,
#sidebarmenue ul li.current-menu-item a {
  background: var(--pink-light, #ef87b8);
  color: #fff;
}

#sidebarmenue ul li.kunstblog a,
#sidebarmenue ul li.kunstblog a:hover,
#sidebarmenue ul li.kunstblog.current-menu-item a {
  background-color: transparent;
}

/* Formulare: Kontrast gewahrt (dunkle Schrift auf hellem Feld) */
input, textarea, select {
  background: rgba(255, 255, 255, 0.9);
  color: #222;
}

#searchform button {
  color: rgba(255, 255, 255, 0.8);
}

/* Schatten nur auf Inhaltsfotos, nicht auf Icons oder Avatare */
#content img:not(.avatar, .social-icon, .icon) {
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.15);
}


/* ==================================================
   Desktop Breakpoint (ab 980px)
   ================================================== */
@media screen and (min-width: 980px) {

  /* Transparenter Desktop-Header; lässt Mobile-Menü solide */
  #header,
  nav,
  #navigation {
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
  }

  nav ul li > a,
  nav ul li > a:hover {
    color: #fff;
  }

  #content ol.commentlist li.even {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
  }
  #content ol.commentlist li.odd {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
  }
  #content ol.commentlist li.pingback {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
  }

}


/* ==================================================
   Große Bildschirme: Deko-Werkzeuge
   ================================================== */
@media screen and (min-width: 1280px) {

  /* pointer-events: none verhindert, dass die Grafiken Klicks blockieren */
  body:before,
  body:after {
    content: '';
    display: block;
    position: fixed;
    z-index: 5;
    pointer-events: none;
    transition: left 0.3s ease, right 0.3s ease;
  }

  body:before {
    background: url(images/werkzeug-01.png) no-repeat 0 0;
    height: 558px;
    width: 150px;
    left: -75px;
    top: 350px;
  }

  body:after {
    background: url(images/werkzeug-02.png) no-repeat 0 0;
    height: 548px;
    width: 150px;
    right: -75px;
    top: 200px;
  }

}

@media screen and (min-width: 1480px) {
  body:before { left: 1%; }
  body:after  { right: 1%; }
}

@media screen and (min-width: 1580px) {
  body:before { left: 3%; }
  body:after  { right: 3%; }
}