/** CSS File for artservice **/

/* fonts */
@font-face {
    font-family: 'frutiger_45_lightregular';
    src: url('../fonts/frutiger-45-light-webfont.woff2') format('woff2'),
         url('../fonts/frutiger-45-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'frutiger_55_romannormal';
    src: url('../fonts/frutiger-55-roman-webfont.woff2') format('woff2'),
         url('../fonts/frutiger-55-roman-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'noahmedium';
    src: url('../fonts/noah-medium-webfont.woff2') format('woff2'),
         url('../fonts/noah-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'noahregular';
    src: url('../fonts/noah-regular-webfont.woff2') format('woff2'),
         url('../fonts/noah-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'noahthin';
    src: url('../fonts/noah-thin-webfont.woff2') format('woff2'),
         url('../fonts/noah-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular.eot');
    src: url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Regular.woff2') format('woff2'),
        url('../fonts/Roboto-Regular.woff') format('woff'),
        url('../fonts/Roboto-Regular.ttf') format('truetype'),
        url('../fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'robotolight';
    src: url('../fonts/Roboto-Light.eot');
    src: url('../fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Light.woff2') format('woff2'),
        url('../fonts/Roboto-Light.woff') format('woff'),
        url('../fonts/Roboto-Light.ttf') format('truetype'),
        url('../fonts/Roboto-Light.svg#Roboto-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@-moz-document url-prefix() {
  img[loading="lazy"] {
    min-height: 1px;
  }
}

@supports (-webkit-touch-callout: none) {
  nav#tbm-main .tbm-button span {
    border-color: #000 !important;
  }
}

.swiper-slide img[loading="lazy"] {
  min-height: 1px;
  display: block;
}

.swiper-wrapper {
  transform: translateZ(0);
}

*, *::before, *::after {box-sizing:border-box;}

html {margin:0; padding:0;}
body {font-family:'robotolight', sans-serif; font-size:1.2em; line-height:24px; margin:0; padding:0; color:#000; background-color:#fff;}

/* global*/
div[role="contentinfo"]         {padding:8px 10px; background-color:#bdfabb;} /* styling of status messages */
div[aria-label="Error message"] {background-color:#fabbbb; margin-bottom:10px;}
div[aria-label="Fehlermeldung"] {background-color:#fabbbb; margin-bottom:10px;}
h1, h2, h3, h4, h5, h6          {font-family:'noahmedium', sans;}
h1                              {font-size:2.5em; line-height:1em; text-transform:uppercase;}
h2                              {font-size:1.6em; line-height:1em;}
h3                              {font-size:1.45em; line-height:1em;}
h4                              {font-size:1.3em;}
h5                              {font-size:1.15em;}
h6                              {font-size:1.0em; margin:0;}
a                               {color:#000;}
input, select                   {padding:5px 8px; font-size:1em;}
input[type="submit"]            {cursor:pointer; padding:10px 16px; font-size:16px; border:1px solid #aaa; border-radius:5px;}
iframe                          {width:100%; height:475px;}
.teaser                         {font-family:'robotoregular', sans;}
.imagefield_slideshow-wrapper   {border:none;}

h1 {
    position: relative;
    padding-top: 22px; /* Platz für den Strich */
  }

h1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;            /* Für zentrierte Linie */
  transform: translateX(-50%);
  width: 40px;          /* Länge des Strichs */
  height: 3px;          /* Dicke des Strichs */
  background-color: #000; /* Farbe des Strichs */
}

/* 1. Standard: Buttons sichtbar lassen (Swiper-Default) */

/* 2. Aber: Immer wenn dieser Container
      eine .swiper-wrapper hat, in der
      genau EIN einziges .swiper-slide drinsteckt… */
.swiper-container:has(.swiper-wrapper > .swiper-slide:only-child) {
  /* 3. …verstecke die Nav-Buttons */
}
.swiper-container:has(.swiper-wrapper > .swiper-slide:only-child)
  .swiper-button-prev,
.swiper-container:has(.swiper-wrapper > .swiper-slide:only-child)
  .swiper-button-next {
  display: none !important;
}

/* structure */
#page                   {display:flex; flex-direction:column; max-width:1920px;}
  #header               {display:flex; flex-direction:column; width:100%; margin-top:35px !important; padding:0 5%; max-width:1920px;}
    #logo               {width:100%; text-align:right;}
    #navigation         {width:100%; max-width:1280px; margin:0 auto; padding-top:15px; text-align:left;}
  #main                 {width:100%; max-width:1280px; margin:150px auto 0 auto;}
    #content            {}
  #footer               {display:flex; flex-direction:row; justify-content:space-between; width:100%; margin-top:50px; padding:3% 5%; color:#000; background-color:#e8e8e8;}
    #footer-first       {width:30%;}
    #footer-second      {width:30%;}
    #footer-third       {width:30%;}
    
/* admin */
body.toolbar-horizontal ul.contextual-links li a        {color:#000 !important;}
#block-artservice-primary-local-tasks ul                {margin-left:0; padding-left:0;}
#block-artservice-primary-local-tasks ul li             {display:inline; margin:0 10px; padding:10px 15px; background-color:#e5e5e5;}
#block-artservice-primary-local-tasks ul li a           {text-decoration:none; color:#000;}
#block-artservice-primary-local-tasks ul li a:hover     {text-decoration:underline;}
#block-artservice-primary-local-tasks ul li:first-child {margin-left:0;}
#user-login-form                                        {margin-top:40px;}
#user-login-form .form-item                             {padding:8px 0;}
#user-login-form .form-item label                       {display:block;}
#user-login-form .button                                {margin-top:30px;}

/* navigation */
nav#tbm-main                          {width:88px;}
nav#tbm-main :focus                   {outline:none !important; outline-offset:0 !important;}
nav#tbm-main a                        {text-transform:uppercase; text-decoration:none; font-size:1.6em;}
nav#tbm-main a:hover                  {background-color:#f8f8f8; color:#222;}
nav#tbm-main .tbm-button {
  width:100%;
  height:88px;
  margin:0;
  padding:0;
  background-color:#fff;
  border:none;
  border-radius:0;
  outline:none !important;
  outline-offset:0 !important;
  box-shadow:none;
  -webkit-tap-highlight-color:transparent;
}
nav#tbm-main .tbm-button span         {outline:none; box-shadow:none; -webkit-tap-highlight-color:transparent; border-color:#000 !important;}
.tbm-button-container span {
  display: block;
  height: 6px;
  width: 88px;
  /* margin: 6px auto; */
  background-color: #000;
  border: none;
  outline: none;
  box-shadow: none;
}
.tbm-button[aria-expanded="true"] .tbm-button-container span:first-child,
.tbm-button[aria-expanded="true"] .tbm-button-container span:last-child {
  background-color: transparent;
}
nav#tbm-main .tbm-button, nav#tbm-main .tbm-button * {-webkit-tap-highlight-color:transparent;}
nav#tbm-main .tbm-button:focus        {outline:none; box-shadow:none;}
nav#tbm-main .tbm-button:focus:not(:focus-visible) {outline: none;}
nav#tbm-main .tbm-button-container    {width:100%; height:54px; padding:0.5rem; margin:0;}
nav#tbm-main .tbm-collapse            {padding-top:0;}
nav#tbm-main .tbm-nav                 {width: 280px;}
nav#tbm-main .tbm-nav .tbm-item--has-dropdown {width:375px;}
nav#tbm-main .tbm-submenu             {width: 375px !important; background-color:#fff !important;}
nav.tbm--mobile-show button.tbm-button      {background-color:none !important;}
nav#tbm-main.tbm--mobile-show .tbm-collapse {width:400px; background-color:#fff;}
.tbm-button-container span            {border-color:#000;}
.tbm.tbm--mobile .tbm-nav             {background-color:none;}
.tbm.tbm--mobile .tbm-item            {border:none; line-height:36px;}
.tbm.tbm--mobile .tbm-submenu         {margin-left:25px; width:300px; background-color:#fff; border-top:none;}
.tbm.tbm--mobile .tbm-submenu a       {color:#666;}
.tbm.tbm--mobile .tbm-submenu a:hover {color:#888;}
.tbm-item.level-1                     {border:none;}
nav.tbm--mobile .tbm-collapse         {position:static !important; z-index:1 !important; transition:max-height 0.4s ease; max-height:0; background-color:#fff;}
nav.tbm--mobile .tbm-collapse[aria-expanded="true"] {max-height:1000px;}
.tbm.tbm--mobile .tbm-submenu-toggle  {position:relative; border:none; background-color:#fff; margin-left:-50px;}
.tbm-submenu-toggle:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45px;
  height: 21px;
  background-image: url("../images/menuepfeil.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: none !important;
  box-shadow: none !important;
  transition: transform 400ms ease-out;
}
.tbm-subnav>.tbm-item>.tbm-link-container>.tbm-link:focus {
    color: #000;
}

/* frontpage */
body.front h1 {position:absolute; z-index:2; visibility:hidden;}
body.front .imagefield_slideshow-wrapper {border:none;}

/* Gemeinsame Basis-Stile für beide Navigationslinks */
body.front .imagefield_slideshow-wrapper .prev-next {
  margin:15px 0 0 0;
}

body.front .imagefield_slideshow-wrapper .prev-next a {
  width: 37px !important;    /* anpassen an die gewünschte Bildgröße */
  height: 37px !important;   /* anpassen an die gewünschte Bildgröße */
  cursor: pointer;
  color: transparent;
  overflow:hidden;
}

body.front .imagefield_slideshow-wrapper .prev-next a:first-child {
  background: url("../images/home-pfeil-nach-links.png") no-repeat center center;
  background-size: contain;
}

body.front .imagefield_slideshow-wrapper .prev-next a:last-child {
  background: url("../images/home-pfeil-nach-rechts.png") no-repeat center center;
  background-size: contain;
}

/* paragraphs */
.paragraph {margin-bottom:150px;}

.paragraph-content h2 {
  position: relative;
  padding-top: 20px; /* Platz für den Strich */
}

.paragraph-content h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;            /* Für zentrierte Linie */
  transform: translateX(-50%);
  width: 40px;          /* Länge des Strichs */
  height: 3px;          /* Dicke des Strichs */
  background-color: #000; /* Farbe des Strichs */
}

.paragraph--type--text-mit-bild-rechts                  {display:flex; flex-direction:row; flex-wrap:nowrap;}
.paragraph--type--text-mit-bild-rechts img              {width:100%; max-width:715px; height:auto;}
.paragraph--type--text-mit-bild-rechts h2               {text-transform:uppercase;}
.paragraph--type--text-mit-bild-rechts .teaser          {font-family:'robotoregular', sans;}
.paragraph--type--text-mit-bild-rechts .paragraph-left  {width:50%; display:flex; align-items:center; padding-right:5%;}
.paragraph--type--text-mit-bild-rechts .paragraph-right {width:50%; display:flex; align-items:center; justify-content:flex-start;}

.paragraph--type--text-mit-bild-links                   {display:flex; flex-direction:row; flex-wrap:nowrap;}
.paragraph--type--text-mit-bild-links img               {width:100%; max-width:715px; height:auto;}
.paragraph--type--text-mit-bild-links h2                {text-transform:uppercase;}
.paragraph--type--text-mit-bild-links .teaser           {font-family:'robotoregular', sans;}
.paragraph--type--text-mit-bild-links .paragraph-right  {width:50%; display:flex; align-items:center; padding-left:5%;}
.paragraph--type--text-mit-bild-links .paragraph-left   {width:50%; display:flex; align-items:center; justify-content:flex-end;}

/* YouTube iframe anpassen */
.paragraph-right iframe[src*="youtube.com"] {
  width: 100%;
  height: auto;
  height: 470px;
}

/* YouTube-Overlays verstecken (soweit möglich mit CSS) */
.paragraph-right .swiper-slide iframe {
  pointer-events: auto;
}

/* Container für Videos optimieren */
.paragraph-right .field--name-field-media-oembed-video {
  position: relative;
  overflow: hidden;
}

/* swiper */
.swiper-slide-image img {height:auto;}
.swiper-button-next, .swiper-button-prev {
  color:#000;
  width: 40px;
  height: 40px;
  /* halb-transparenter weißer Hintergrund */
  background-color: rgba(255, 255, 255, 0.6);
  /* runde Form */
  border-radius: 50%;
  /* sicherstellen, dass der Inhalt (Pfeil) immer mittig sitzt */
  display: flex;
  align-items: center;
  justify-content: center;
  /* falls nötig: Hover-Effekt */
  transition: background-color 0.2s;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.swiper-pagination-bullet-active {color:#fff;}
.swiper-pagination-bullet {background: var(--swiper-pagination-bullet-inactive-color, #fff); opacity: var(--swiper-pagination-bullet-inactive-opacity, 1);}
:root {--swiper-navigation-size: 22px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}

/* aktuelles */
.view-aktuelles ul li                               {list-style:none; list-style-image:none;}
.view-aktuelles ul                                  {display:flex; flex-direction:column;}
.view-aktuelles .views-field-nothing                {margin-bottom:50px;}
.view-aktuelles .views-field-nothing .field-content {display:flex; flex-direction:row; flex-wrap:nowrap;}
.view-aktuelles .views-field-nothing .leftcolumn    {width:45%; text-align:center;}
.view-aktuelles .views-field-nothing .rightcolumn   {width:55%;}
.view-aktuelles nav ul.js-pager__items              {flex-direction:row; flex-wrap:nowrap; justify-content:center;}
.view-aktuelles nav ul.js-pager__items li a         {margin:0 8px;}

/* projekte */
.view-projekte ul li                        {list-style:none; list-style-image:none; margin-bottom:30px;}
.view-projekte ul                           {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; margin:0; padding:0;}
.view-projekte .views-field-title           {margin-top:5px; text-transform:uppercase; max-width:310px;}
.view-projekte .projekt_titel               {margin-top:5px; text-transform:uppercase; max-width:310px;}
.view-projekte nav ul.js-pager__items       {flex-direction:row; flex-wrap:nowrap; justify-content:center; margin-top:80px;}
.view-projekte nav ul.js-pager__items li a  {margin:0 8px;}
.view-projekte nav ul.js-pager__items .is-active {font-weight:bold; font-size:1.25em;}

.projekt_vorschaubild {
  /* Damit das hineingezoomte Bild nicht überläuft */
  overflow: hidden;
  /* Optional: definiere Breite/Höhe oder lasse es flex/grid steuern */
  /* width: 310px;
     height: 233px; */
}

.projekt_vorschaubild img {
  display: block;               /* entfernt evtl. whitespace */
  width: 100%;                  /* füllt das Container-Layout */
  height: auto;                 /* behält das Seitenverhältnis */
  transition: transform 0.3s ease; /* sanfte Animation */
  transform-origin: center center; /* zoomt von der Bildmitte aus */
}

.projekt_vorschaubild:hover img {
  transform: scale(1.2);        /* 1.2 = +20% */
}


/* projekte theater */
.view-projekte-theater ul li                        {list-style:none; list-style-image:none; margin-bottom:30px;}
.view-projekte-theater ul                           {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; margin:0; padding:0;}
.view-projekte-theater .views-field-title           {margin-top:5px; text-transform:uppercase; max-width:310px;}
.view-projekte-theater .projekt_titel               {margin-top:5px; text-transform:uppercase; max-width:310px;}
.view-projekte-theater nav ul.js-pager__items       {flex-direction:row; flex-wrap:nowrap; justify-content:center; margin-top:80px;}
.view-projekte-theater nav ul.js-pager__items li a  {margin:0 8px;}

/* projekte museen */
.view-projekte-museen ul li                        {list-style:none; list-style-image:none; margin-bottom:30px;}
.view-projekte-museen ul                           {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; margin:0; padding:0;}
.view-projekte-museen .views-field-title           {margin-top:5px; text-transform:uppercase; max-width:310px;}
.view-projekte-museen .projekt_titel               {margin-top:5px; text-transform:uppercase; max-width:310px;}
.view-projekte-museen nav ul.js-pager__items       {flex-direction:row; flex-wrap:nowrap; justify-content:center; margin-top:80px;}
.view-projekte-museen nav ul.js-pager__items li a  {margin:0 8px;}

/* projekte 3dformen */
.view-projekte-3dformen ul li                        {list-style:none; list-style-image:none; margin-bottom:30px;}
.view-projekte-3dformen ul                           {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; margin:0; padding:0;}
.view-projekte-3dformen .views-field-title           {margin-top:5px; text-transform:uppercase; max-width:310px;}
.view-projekte-3dformen .projekt_titel               {margin-top:5px; text-transform:uppercase; max-width:310px;}
.view-projekte-3dformen nav ul.js-pager__items       {flex-direction:row; flex-wrap:nowrap; justify-content:center; margin-top:80px;}
.view-projekte-3dformen nav ul.js-pager__items li a  {margin:0 8px;}

/* projekte studios */
.view-projekte-studios ul li                        {list-style:none; list-style-image:none; margin-bottom:30px;}
.view-projekte-studios ul                           {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; margin:0; padding:0;}
.view-projekte-studios .views-field-title           {margin-top:5px; text-transform:uppercase; max-width:310px;}
.view-projekte-studios .projekt_titel               {margin-top:5px; text-transform:uppercase; max-width:310px;}
.view-projekte-studios nav ul.js-pager__items       {flex-direction:row; flex-wrap:nowrap; justify-content:center; margin-top:80px;}
.view-projekte-studios nav ul.js-pager__items li a  {margin:0 8px;}

/* projekte besucherzentren */
.view-projekte-besucherzentren ul li                        {list-style:none; list-style-image:none; margin-bottom:30px;}
.view-projekte-besucherzentren ul                           {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; margin:0; padding:0;}
.view-projekte-besucherzentren .views-field-title           {margin-top:5px; text-transform:uppercase; max-width:310px;}
.view-projekte-besucherzentren .projekt_titel               {margin-top:5px; text-transform:uppercase; max-width:310px;}
.view-projekte-besucherzentren nav ul.js-pager__items       {flex-direction:row; flex-wrap:nowrap; justify-content:center; margin-top:80px;}
.view-projekte-besucherzentren nav ul.js-pager__items li a  {margin:0 8px;}

/* projekt - detailseite */
body.node--type-projekt #block-artservice-page-title h1 {display: none;}
.node--type-projekt .projectinfos                       {max-width:1120px; margin:80px auto 0 auto;}
.node--type-projekt .projecttext                        {display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between;}
.node--type-projekt h1                                  {margin:20px 0 30px 0; line-height:1em;}
.node--type-projekt .column                             {width:47%; float:left;}
.node--type-projekt .columnleft                         {padding-right:3%;}
.node--type-projekt .columnright                        {padding-left:3%;}
.node--type-projekt .columnright a                      {color:#000;}
.node--type-projekt .columnright .field                 {padding:0.5em 0; border-bottom:1px solid #000;}
.node--type-projekt .columnright .field .field__label   {width:40%; float:left;}
.node--type-projekt .columnright .field .field__item    {width:60%; float:right;}
.node--type-projekt .field--name-field-bilder           {width:100%; height:auto;}
.node--type-projekt .field--name-field-bilder img       {height:840px; width:auto; margin:0 auto;}
.node--type-projekt .swiper-container                   {max-width:1120px;}
.node--type-projekt .swiper-slide                       {max-width:1120px;}
.node--type-projekt .swiper-slide-image img             {width:100%; height:auto; max-width:1120px; margin:0 auto;}
.node--type-projekt .field-name-field-bilder .field-slideshow-pager a {display:block; width:10px !important; height:10px !important; overflow:hidden; margin-right:10px; background-color:#666; color:#666; float:left;}
.node--type-projekt .field-name-field-bilder .field-slideshow-pager a.activeSlide {background-color:#f93; color:#f9c;}
.node--type-projekt .field--name-field-kategorie        {display:flex; flex-direction:row; flex-wrap:nowrap; text-transform:uppercase;}
.node--type-projekt .field--name-field-kategorie a      {text-transform:uppercase;}
.node--type-projekt .field--name-field-kategorie .field__item {margin-right:15px;}
.node--type-projekt .flippy                             {clear:both; font-size:0.9em; padding-top:80px; margin-bottom:80px;}
.node--type-projekt .flippy ul                          {display:flex; justify-content:center; flex-direction:row; flex-wrap:nowrap; align-items:center; padding:0;}
.node--type-projekt .flippy ul li                       {display:inline-flex; align-items:center; margin:0 35px;}
.node--type-projekt .flippy ul li:first-child           {padding-top:12px;}
/*
.node--type-projekt .flippy ul li:first-child::before   {content:url('../images/pfeil-nach-links.png'); height:35px; margin-right:10px; overflow:hidden;}
.node--type-projekt .flippy ul li:last-child::after     {content:url('../images/pfeil-nach-rechts.png'); height:35px; margin-left:10px; overflow:hidden;}
*/
.node--type-projekt .flippy a                           {color:#000;}
/* Link übernimmt jetzt das Pfeil-Icon */
.node--type-projekt .flippy ul li:first-child a::before {
  content: url(../images/pfeil-nach-links.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  height: 35px;
  /* damit das Icon wirklich zum Link gehört */
  pointer-events: none;
}

.node--type-projekt .flippy ul li:last-child a::after {
  content: url(../images/pfeil-nach-rechts.png);
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  height: 35px;
  pointer-events: none;
}

/* imagefield slideshow */
body.node--type-projekt .imagefield_slideshow-wrapper {display:flex; align-items:center; border:none;}

/* Gemeinsame Basis-Stile für beide Navigationslinks */
body.node--type-projekt .imagefield_slideshow-wrapper .prev-next a {
  position: absolute;
  width: 79px;    /* anpassen an die gewünschte Bildgröße */
  height: 79px;   /* anpassen an die gewünschte Bildgröße */
  text-indent: -9999px; /* Textinhalt ausblenden */
  z-index: 200;   /* Pfeile liegen über dem Bild */
  cursor: pointer;
}

/* Pfeil "Vorheriges" (links): erster <a> innerhalb .prev-next */
body.node--type-projekt .imagefield_slideshow-wrapper .prev-next a:first-child {
  left: 15px;  /* Abstand vom linken Rand, nach Bedarf anpassen */
  background: url("../images/slide-pfeil-nach-links.png") no-repeat center center;
  background-size: contain;
}

/* Pfeil "Weiter" (rechts): letzter <a> innerhalb .prev-next */
body.node--type-projekt .imagefield_slideshow-wrapper .prev-next a:last-child {
  right: 15px;  /* Abstand vom rechten Rand, nach Bedarf anpassen */
  background: url("../images/slide-pfeil-nach-rechts.png") no-repeat center center;
  background-size: contain;
}

/* Deaktivierter Zustand: z.B. falls .disabled oder [aria-disabled="true"] gesetzt ist */
/* Beim ersten Bild: linker Pfeil (und beim letzten: rechter Pfeil) werden so 80% transparent und un-klickbar */
body.node--type-projekt .imagefield_slideshow-wrapper .prev-next a:first-child.disabled,
body.node--type-projekt .imagefield_slideshow-wrapper .prev-next a:first-child[aria-disabled="true"],
body.node--type-projekt .imagefield_slideshow-wrapper .prev-next a:last-child.disabled,
body.node--type-projekt .imagefield_slideshow-wrapper .prev-next a:last-child[aria-disabled="true"] {
  opacity: 0.2;
  pointer-events: none;
  cursor: default;
}

/* team */
.view-team                        {margin-bottom:100px;}
.view-team h2                     {text-transform:uppercase;}
.view-team ul                     {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; margin:0; padding:0;}
.view-team ul li                  {list-style:none; list-style-image:none; margin:0 70px 30px 0; font-size:0.8em;}
.view-team ul li .namekontakt     {display:flex; align-items:center; font-size:1.4em; font-family:"robotoregular", sans-serif;}
.view-team ul li .namekontakt img {margin-left:12px; display:none;}
.view-team ul li .telefonnummer a {color:#000;}
.view-team ul li .email a         {color:#000;}

/* kontakt */
.field--name-field-google-map {margin-bottom:100px;}
.field--name-body a img       {margin-right:20px;}

/* downloads */
.view-downloads                                 {margin-bottom:100px;}
.view-downloads ul                              {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; margin:0; padding:0;}
.view-downloads ul li                           {list-style:none; list-style-image:none; margin:0 20px 70px 0;}
.view-downloads ul li .views-field-field-datei  {max-width:215px;}

/* footer */
#footer a {color:#000;}

/* footer second */
#block-artservice-socialmedia                   {}
#block-artservice-socialmedia img               {margin:0 10px;}
#block-artservice-socialmedia > h2              {display:none;}
#block-artservice-socialmedia .fusszeile-mitte  {width:225px; text-align:center;}

/* footer third */
#block-artservice-fusszeile ul    {margin:0; padding:0;}
#block-artservice-fusszeile ul li {list-style:none; list-style-image:none;}


/* portrait */
@media screen and (orientation: portrait) {
  
  .view-aktuelles ul li .views-field-nothing img {width:100%; max-width:450px; height:auto; margin:0 auto;}

}

/* responsive */

@media only screen and (max-width:470px) {
  
  #main                       {margin:50px auto 0 auto;}
  #header                     {padding:0 3%; text-align:center;}
  #logo                       {text-align:center;}
  #logo img                   {height:40px; width:auto; margin-top:3px;}
  nav#tbm-main                {width: 60px;}
  nav#tbm-main .tbm-submenu   {width: 450px !important;}
  nav#tbm-main .tbm-button-container span {width:60px;}
  nav#tbm-main .tbm-button-container {width:60px; height:40px; padding:0.5rem; margin:0;}
  nav#tbm-main .tbm-button    {width:60px;}
  .view-team ul               {flex-direction:column; justify-content:center;}
  .view-team ul li            {margin:0 0 30px 0 !important;}
  .view-team ul li .views-field-nothing {display:flex; justify-content:center;}
  
}

@media only screen and (max-width:640px) {
  
  #main                       {margin:50px auto 0 auto;}
  #header                     {padding:0 3%; text-align:center;}
  #logo                       {text-align:center;}
  #logo img                   {height:40px; width:auto; margin-top:3px;}
  nav#tbm-main                {width: 60px;}
  nav#tbm-main .tbm-submenu   {width: 450px !important;}
  nav#tbm-main .tbm-button-container span {width:60px;}
  nav#tbm-main .tbm-button-container {width:60px; height:40px; padding:0.5rem; margin:0;}
  nav#tbm-main .tbm-button    {width:60px;}
  
  #main-content                                           {width:100%;}
  #header                                                 {flex-direction:row; flex-wrap:nowrap; align-items:center;}
  #header #logo                                           {order:2;}
  #header #navigation                                     {order:1; padding:0; margin-right:15px;}
  .paragraph                                              {margin-bottom:50px;}
  .paragraph--type--text-mit-bild-rechts                  {flex-direction:column; justify-content:center !important;}
  .paragraph--type--text-mit-bild-rechts .paragraph-left  {width:95%; order:2; padding:0;}
  .paragraph--type--text-mit-bild-rechts .paragraph-right {width:95%; order:1;}
  .paragraph--type--text-mit-bild-links                   {flex-direction:column; justify-content:center !important;}
  .paragraph--type--text-mit-bild-links .paragraph-left   {width:95%;}
  .paragraph--type--text-mit-bild-links .paragraph-right  {width:95%; padding:0;}
  .paragraph--type--text-mit-bild-rechts .paragraph-right, .paragraph--type--text-mit-bild-rechts .paragraph-left {margin:0 auto;}
  .paragraph--type--text-mit-bild-links .paragraph-left, .paragraph--type--text-mit-bild-links .paragraph-right   {margin:0 auto;}
  .paragraph-left .swiper-wrapper                         {width:100%;}
  .paragraph-right .swiper-wrapper                        {width:100%;}
  .field--name-field-google-map                           {width:100%;}
  .field--name-field-google-map iframe                    {width:100%;}
  .view-projekte ul                                       {flex-direction:column; justify-content:center;}
  .view-projekte ul li .views-field-nothing               {display:flex; justify-content:center;}
  .view-projekte-theater ul                               {flex-direction:column; justify-content:center;}
  .view-projekte-theater ul li .views-field-nothing       {display:flex; justify-content:center;}
  .view-projekte-museen ul                                {flex-direction:column; justify-content:center;}
  .view-projekte-museen ul li .views-field-nothing        {display:flex; justify-content:center;}
  .view-projekte-3dformen ul                              {flex-direction:column; justify-content:center;}
  .view-projekte-3dformen ul li .views-field-nothing      {display:flex; justify-content:center;}
  .view-projekte-studios ul                               {flex-direction:column; justify-content:center;}
  .view-projekte-studios ul li .views-field-nothing       {display:flex; justify-content:center;}
  .view-projekte-besucherzentren ul                       {flex-direction:column; justify-content:center;}
  .view-projekte-besucherzentren ul li .views-field-nothing {display:flex; justify-content:center;}
  /*
  .view-projekte ul                                       {flex-direction:column; justify-content:center;}
  .view-projekte ul li .views-field-field-bilder          {width:95%;}
  .view-projekte ul li .views-field-field-bilder img      {width:100%; height:auto;}
  */
  /* 1. Flex-Container spaltenweise */
  .paragraph--type--text-mit-bild-rechts {
    display: flex;
    flex-direction: column;
  }

  /* 2. Wrapper „auflösen“, damit die echten Inhalte Flex-Items werden */
  .paragraph--type--text-mit-bild-rechts .paragraph-left,
  .paragraph--type--text-mit-bild-rechts .paragraph-left .paragraph-content {
    display: contents;
  }

  /* 3. Reihenfolge festlegen */
  .paragraph--type--text-mit-bild-rechts .field--name-field-titel { order: 1; }
  .paragraph--type--text-mit-bild-rechts .paragraph-right         { order: 2; }
  .paragraph--type--text-mit-bild-rechts .teaser                  { order: 3; }
  .paragraph--type--text-mit-bild-rechts .field--name-field-text  { order: 4; }
  
  /* 1. Flex-Container spaltenweise */
  .paragraph--type--text-mit-bild-links {
    display: flex;
    flex-direction: column;
  }

  /* 2. Wrapper „auflösen“, damit die echten Inhalte Flex-Items werden */
  .paragraph--type--text-mit-bild-links .paragraph-right,
  .paragraph--type--text-mit-bild-links .paragraph-right .paragraph-content {
    display: contents;
  }

  /* 3. Reihenfolge festlegen */
  .paragraph--type--text-mit-bild-links .field--name-field-titel { order: 1; }
  .paragraph--type--text-mit-bild-links .paragraph-left          { order: 2; }
  .paragraph--type--text-mit-bild-links .teaser                  { order: 3; }
  .paragraph--type--text-mit-bild-links .field--name-field-text  { order: 4; }
  
}

@media only screen and (max-width:768px) {

  #footer                                         {flex-direction:column; justify-content:center; text-align:center;}
  #footer-first, #footer-second, #footer-third    {width:95%;}
  #footer-third                                   {margin-bottom:30px;}
  #block-artservice-socialmedia .fusszeile-mitte  {width:100%;}
  .view-team ul li                                {margin:0 35px 30px 0;}

}

@media only screen and (max-width:880px) {

  .node--type-projekt .projecttext                    {flex-direction:column;}
  .node--type-projekt .column                         {width:95%; clear:both;}
  .node--type-projekt .columnright                    {margin-top:40px; padding-left:0;}
  .node--type-projekt .flippy                         {padding-top:50px;}
  .view-aktuelles .views-field-nothing .field-content {flex-direction:column;}
  .view-aktuelles .views-field-nothing .leftcolumn    {width:95%;}
  .view-aktuelles .views-field-nothing .rightcolumn   {width:95%;}

}

@media only screen and (max-width:960px) {
  
  body.node--type-projekt .imagefield_slideshow-wrapper {display:flex; flex-direction:column; border:none;}
  
  /* Gemeinsame Basis-Stile für beide Navigationslinks */
  body.node--type-projekt .imagefield_slideshow-wrapper .prev-next a {
    position: static;
    width: 79px;    /* anpassen an die gewünschte Bildgröße */
    height: 79px;   /* anpassen an die gewünschte Bildgröße */
    text-indent: -9999px; /* Textinhalt ausblenden */
    z-index: 200;   /* Pfeile liegen über dem Bild */
    cursor: pointer;
    color:transparent;
  }

  /* Pfeil "Vorheriges" (links): erster <a> innerhalb .prev-next */
  body.node--type-projekt .imagefield_slideshow-wrapper .prev-next a:first-child {
    /*left: 15px; */  /* Abstand vom linken Rand, nach Bedarf anpassen */
    background: url("../images/slide-pfeil-nach-links.png") no-repeat center center;
    background-size: contain;
  }

  /* Pfeil "Weiter" (rechts): letzter <a> innerhalb .prev-next */
  body.node--type-projekt .imagefield_slideshow-wrapper .prev-next a:last-child {
    /* right: 15px; */  /* Abstand vom rechten Rand, nach Bedarf anpassen */
    background: url("../images/slide-pfeil-nach-rechts.png") no-repeat center center;
    background-size: contain;
  }

  /* Deaktivierter Zustand: z.B. falls .disabled oder [aria-disabled="true"] gesetzt ist */
  /* Beim ersten Bild: linker Pfeil (und beim letzten: rechter Pfeil) werden so 80% transparent und un-klickbar */
  body.node--type-projekt .imagefield_slideshow-wrapper .prev-next a:first-child.disabled,
  body.node--type-projekt .imagefield_slideshow-wrapper .prev-next a:first-child[aria-disabled="true"],
  body.node--type-projekt .imagefield_slideshow-wrapper .prev-next a:last-child.disabled,
  body.node--type-projekt .imagefield_slideshow-wrapper .prev-next a:last-child[aria-disabled="true"] {
    /*opacity: 0.2; */
    pointer-events: none;
    cursor: default;
  }

}

@media only screen and (max-width:1150px) {


  
}

@media only screen and (max-width:1300px) {

  #main {width:95%;}
 
}