/* --------------- v5 --- */
/* --- Grundstruktur --- */
  body {
    margin: 0;
    font-family: serif;
    background: #ffffff;
    color: #111;
    transition: background 0.3s, color 0.3s;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; 
  }
  #top {
    position: fixed;
    top:0; left:0; right:0;
    height:4rem;
    display:flex;
    justify-content:center;
    align-items:center;
    /*border-bottom:1px solid #eee;*/
    background: #eee;
    z-index:10;
  }
  #tor {
    border:none;
    background:none;
    /*font-size:1.4rem;*/
    font-size:25px;
    cursor:pointer;
  }
  #raum {
    max-width:42rem;
    margin:6rem auto 4rem;
    padding:0 1.5rem;
  }

  #raum img {
  max-width: 100%;
  height: auto;
  display: block;
  }

  /* Index */
  .index {
    display:flex;
    flex-direction:column;
    gap:1rem;
  }
  .index button {
    background: none;
    border: none;
    text-align: left;
    /*font-size: 1.1rem;*/
    font-size:20px;
    cursor: pointer;
    font-family: inherit;
  }


  /* ---- Tropfen ---- */
  /* Standard Tropfen */
  .tropfen-item {
    padding: 0px;
    line-height: 1.7;
  }

  .tropfen-item-preWrap {
    padding: 100px 0;
    line-height: 1.7;
    white-space: pre-wrap;
  }

  

  /* Zweiter Wrapper */
  .tropfen-red {
    background: rgba(255,0,0,0.05);
    font-style: italic;
    padding: 100px 0;
    line-height: 1.7;
    white-space: pre-wrap;
  }

  
  .tropfen-item a, .tropfen-red a {
    color: #0066cc;
    text-decoration: underline;
    cursor: pointer;
  }

/* Dark / Sepia */
  body.dark { background:#282828; color:#ebdbb2; }
  body.dark .index button { color:#ebdbb2; }
  body.dark #top { border-bottom:1px solid #504945; }


/* --- VC-LANDING --- */

  .vc_wrap_100 { 
    /* sub container für landing page, mit 100 vH */
    height:100vh; 
    display:flex; 
    flex-direction:column; 
    box-sizing:border-box; 
    font-size:19px;
  }

  .vc_wrap { 
    /* sub conmtainer für einheiten auf PAGE, v.a landing page */
    height:auto;
    margin-bottom:400px;
    display:flex; 
    flex-direction:column; 
    box-sizing:border-box; 
    font-size:19px;
  }

  .vc_wrap_topEntry {
    /* entry padding für TOP; vA für PAGE / HTML TROPFEN */
    padding-top:50px;
  }

  .vc_wrap_footerEnd {
    height:99vh;
  }

  .vc_top, .vc_middle, .vc_bottom { 
    width:100%; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
  }

  .vc_top { height:25%; } 
  .vc_middle { height:50%; } 
  .vc_bottom { height:25%; }

  .vc_main-image, .vc_random-image { 
    max-width:90%; 
    object-fit:contain; 
    opacity:1; 
    filter:blur(0); 
    transition: opacity 2s ease, filter 2s ease; 
  }

  .vc_middle img { 
    max-height:100%; 
  }

  .vc_bottom { font-size:1.5rem; text-align:center; color:black; }
  .vc_bottom-text { }


  .vc-text { 
      line-height:1.6; 
  }

  .vc-text-struktur { 
      color:#484848; 
      font-style:italic; 
    }

  .vc_divider {
    margin:80px 0;
  }

  .vc-neiJingTu img {
    max-width: 100%; /* passt sich der Breite des Containers an */
    height: auto;    /* behält das Seitenverhältnis */
    display: block;
    margin: 0 auto;
  }

  /*---- VC LINKS ---- */ 
  /* 
  CLASS a >> verändert alle LINKS innerhalb dieses WRAPPERS,

  um eine bestimmte LINK KLASSE für einen bestimmten LINK
  .vcLink {
    color:#484848;
    text-decoration:none;
    font-size:8px;
  }
  .vcLink:hover {
    font-weight:bold;
  }
  */

  .vc-text a { 
    color:#484848; 
    text-decoration:none; 
    font-weight:bold; 
    transition: font-weight 0.2s;
  }

  /*
  .vc-text a:hover { 
    font-weight:bold; 
  }
  */